Installation

Two ways in, and which one you want depends on what you are building.

A whole site

The usual one: a Laravel application with the panel on it, the modules you chose, an administrator and some content to look at — from an empty directory, in one command.

composer create-project webx-ui/site example.local

Everything after that — the questions, installing a module six months later, the layout seam, the demo content, webx:doctor — is in A new site. The rest of this page is the other way in.

The library on its own

For a Vue application that wants the components and nothing else: no Laravel, no panel, no modules.

pnpm add @webx-ui/core @webx-ui/tokens

vue is a peer dependency (^3.5) — install it in the host app.

Global registration

// main.ts
import { createApp } from 'vue'
import { WebxUI } from '@webx-ui/core'
import '@webx-ui/core/style.css'
import App from './App.vue'

createApp(App).use(WebxUI).mount('#app')

All components become available in templates as <wx-button>, <wx-input>, <wx-card>.

Named imports

Prefer this when bundle size matters — unused components are tree-shaken away.

<script setup lang="ts">
import { ref } from 'vue'
import { WxButton, WxCard, WxInput } from '@webx-ui/core'
import '@webx-ui/core/style.css'

const title = ref('')
</script>

<template>
  <wx-card title="New page">
    <wx-input v-model="title" placeholder="Title" clearable />
    <template #footer>
      <wx-button type="primary" @click="save">Save</wx-button>
    </template>
  </wx-card>
</template>

@webx-ui/core/style.css bundles the token variables, so a separate import '@webx-ui/tokens/tokens.css' is only needed when using the tokens without the components.

The typeface

Out of the box the library asks for the platform's own UI font — Segoe UI on Windows, San Francisco on macOS, Roboto on Android. That costs nothing to load and never looks foreign, but it does mean your admin panel looks slightly different on every operating system.

One import changes that. It brings Inter, self-hosted, and points the type token at it:

import '@webx-ui/tokens/fonts.css'

The faces ship inside the package (@fontsource-variable/inter, SIL Open Font License) — no request to Google, no <link> in your Blade layout, nothing to configure at the CDN. They are variable and split by alphabet, so a page that shows Cyrillic downloads the Cyrillic file and nothing else, and text paints immediately in the fallback while the file arrives.

Prefer your own typeface? Skip the import and set the token:

:root {
  --wx-font-family-sans: 'Graphik', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

Using tokens alone

import '@webx-ui/tokens/tokens.css'

.my-panel {
  background: var(--wx-bg-surface);
  border: 1px solid var(--wx-border-default);
  border-radius: var(--wx-radius-lg);
  padding: var(--wx-space-16);
}

Inside a Laravel app

For the panel itself, do not write any of this by hand — php artisan webx:panel --sync writes the entry file, the Vite input and the dependencies from the modules installed on the server, and A new site is the whole of it. What follows is for an application that wants the components in a Vue app of its own.

Laravel ships with Vite. Register the Vue plugin and import the styles from your admin entry point:

// vite.config.js
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [laravel({ input: ['resources/js/admin.ts'], refresh: true }), vue()],
}

// resources/js/admin.ts
import { createApp } from 'vue'
import { WebxUI } from '@webx-ui/core'
import '@webx-ui/core/style.css'
import Admin from './Admin.vue'

createApp(Admin).use(WebxUI).mount('#admin')