Getting Started

Installation

pnpm install @vuer-ai/vuer-uikit

How to Use

The VUER UI Kit serves source typescript and css files so that you can style it with tailwindcss in your consumer project. You can also use this without the /src suffix in development mode in an pnpm workspace.

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

Now, add the CSS import to your main CSS file:

@import "tailwindcss";
@import "@vuer-ai/vuer-uikit/index.css";

Tailwind Configuration

Update your tailwind.config.ts to include the UI Kit components:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    ...
    // this one links the typescript source files for tw4 to fnd.
    "./node_modules/@vuer-ai/vuer-uikit/src/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;

Vite Development Configuration

For development with source imports, configure Vite aliases in your vite.config.ts:

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

export default defineConfig({
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
    alias: (() => {
      if (process.env.NODE_ENV !== "development") {
        return {
          "@": path.resolve(__dirname, "./src"),
        };
      } else {
        const uikitSrc = path.resolve(__dirname, "./node_modules/@vuer-ai/vuer-uikit/src");
        return {
          "@": path.resolve(__dirname, "./src"),
          "@vuer-ai/vuer-uikit": uikitSrc,
          "@vuer-ai/vuer-uikit/index.css": `${uikitSrc}/index.css`,
          "@vuer-ai/vuer-uikit/styles/variables.css": `${uikitSrc}/styles/variables.css`,
          "@vuer-ai/vuer-uikit/styles/theme.css": `${uikitSrc}/styles/theme.css`,
          "@vuer-ai/vuer-uikit/styles/toast.css": `${uikitSrc}/styles/toast.css`,
        };
      }
    })(),
  },
  plugins: [
    // your other plugins...
  ]
});

This configuration provides different aliases based on the environment - using source files in development for better debugging and built files in production for stability.

Usage

Import and use components:

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

function App() {
  return (
    <Card className="p-6">
      <h1 className="text-2xl font-bold mb-4">
        Welcome to VUER UI Kit
      </h1>
      <div className="flex gap-2">
        <Button variant="default">Get Started</Button>
        <Button variant="secondary">Learn More</Button>
      </div>
      <Badge className="mt-4">Ready to use</Badge>
    </Card>
  );
}

Manual Source Import (when not using workspace)

For development without a workspace, you can import the source files directly. Note that you will need to install the dependendencies and peer dependencies manually.

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

// ...your code

Note: Source imports require installing peer dependencies manually.

Next Steps