Webui Core Documentation

Installation

Install the core package via your preferred package manager. It includes TypeScript definitions, framework adapters, and zero runtime dependencies.

bash

npm install @webui/core
# or
yarn add @webui/core
# or
pnpm add @webui/core

Quick Start

Import the core registry and register components globally or locally based on your needs.

tsx

import { register, Button, Input, Card } from '@webui/core/react';
import '@webui/core/styles.css';

export default function App() {
  return (
    <div className="app">
      <Card title="Dashboard" padding="lg">
        <Input placeholder="Search..." icon={"search"} />
        <Button variant="primary" onClick={handleSave}>
          Apply Changes
        </Button>
      </Card>
    </div>
  );
}

vue

<template>
  <wui-card title="Dashboard" padding="lg">
    <wui-input placeholder="Search..." icon="search"/>
    <wui-button variant="primary" @click="handleSave">
      Apply Changes
    </wui-button>
  </wui-card>
</template>

<script setup>
import '@webui/core/vue';
import '@webui/core/styles.css';
const handleSave = () => console.log('saved');
</script>

import { createApp, components, utils } from '@webui/core';
import '@webui/core/styles.css';

const app = createApp(components);
app.mount('#app');

// Usage in HTML:
// <wui-button variant="primary">Click me</wui-button>

Core Components

The core library ships with 40+ production-ready primitives. Here are the most commonly used:

Card Component Lightweight container with flexible content area.

Property	Type	Default	Description
`variant`	string	`"primary"`	Visual style of the component (primary, secondary, ghost, danger)
`size`	string	`"md"`	Size scale (xs, sm, md, lg, xl)
`disabled`	boolean	`false`	Disables interaction and applies reduced opacity
`padding`	string	`"md"`	Internal spacing token (none, sm, md, lg, xl)
`onHover`	string	`"scale"`	Micro-interaction on hover (none, scale, lift, glow)

Theming & Configuration

Webui Core uses a CSS variable-based theming system. Override tokens at the root or component level.

css

/* Global theme override */
:root {
  --wui-primary: #6366F1;
  --wui-primary-hover: #4F46E5;
  --wui-radius: 8px;
  --wui-font-sans: system-ui, sans-serif;
  --wui-spacing-md: 1rem;
}

/* Component-level override */
.wui-btn {
  --wui-primary: #EC4899; /* Pink override */
}

For dark mode, use the .wui-dark utility class or the prefers-color-scheme media query with our auto-switching plugin.

Performance & SSR

@webui/core is optimized for production. It supports:

Zero CSS framework dependencies (scoped styles only)
Automatic tree-shaking via ES modules
Server-side rendering with hydrate() utility
Client-side hydration with zero layout shift

import { hydrate } from '@webui/core/ssr';

// Mount on server, hydrate on client
if (typeof window !== 'undefined') {
  hydrate(document.querySelector('[data-webui-app]'));
}