Welcome to Vuer UI Kit! 🔥

VUER UI Kit is a modern React component library built with Tailwind CSS and Radix UI primitives. It provides accessible, customizable components with a CSS Variables-based theming system for seamless dark/light mode switching.

Built with React 19 and Tailwind CSS 4, this library leverages Radix UI primitives to deliver accessible components with comprehensive ARIA support. It features liquid light and dark themes powered by CSS Variables, providing seamless theme switching and customizable design tokens.

pnpm install @vuer-ai/vuer-uikit

Quick Example

import {
  Button,
  Toolbar,
  ToolbarGroup,
  ToolbarSeparator,
  ToggleButtons,
  ToggleButton,
  Tooltip,
  TooltipTrigger,
  TooltipContent
} from '@vuer-ai/vuer-uikit';
import { Hash, Type, Plus } from 'lucide-react';
import { useState } from 'react';

function App() {
  const [selectedTool, setSelectedTool] = useState("select");

  return (
    <Toolbar size="md">
      <ToolbarGroup>
        <ToggleButtons value={selectedTool} onValueChange={setSelectedTool}>
          <ToggleButton icon value="select">
            <CursorIcon/>
          </ToggleButton>
          <ToggleButton value="edit" icon>
            <EditIcon/>
          </ToggleButton>
        </ToggleButtons>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button icon variant="ghost">
              <Hash />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Hash tool</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button icon variant="ghost">
              <Type/>
            </Button>
          </TooltipTrigger>
          <TooltipContent>Type tool</TooltipContent>
        </Tooltip>
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarGroup>
        <Button variant="primary" size="md">
          <Plus/> Add
        </Button>
      </ToolbarGroup>
    </Toolbar>
  );
}

Import Options

The package supports two import methods:

Built package (recommended):

import { Button, Card } from '@vuer-ai/vuer-uikit';

Source files (development):

import { Button, Card } from '@vuer-ai/vuer-uikit';

Vite Configuration

For development with source imports, configure Vite aliases:

// vite.config.ts
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@vuer-ai/vuer-uikit': path.resolve('./node_modules/@vuer-ai/vuer-uikit/src'),
      '@vuer-ai/vuer-uikit/index.css': path.resolve('./node_modules/@vuer-ai/vuer-uikit/src/index.css'),
    }
  }
});

Ready to get started? Check out the Getting Started guide.