Installation

VLLNT UI ships as both an npm package and a shadcn-compatible registry. Most teams should install individual components from the registry so the source lands in their app and can be adapted locally.

Prerequisites

Node.js 20 or newer.
pnpm for this repository and for examples in this documentation.
A React application with TypeScript.
Tailwind CSS configured in the application.

Install the package

Use the package when you want to import prebuilt exports from @vllnt/ui:

pnpm add @vllnt/ui

Then import the full package stylesheet once from your app entry, such as app/layout.tsx or src/main.tsx:

import "@vllnt/ui/styles.css";

Add the VLLNT UI Tailwind preset and keep your application source in Tailwind content scanning:

// tailwind.config.ts
import uiPreset from "@vllnt/ui/tailwind-preset";

export default {
  presets: [uiPreset],
  content: ["./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
};

Then import a component:

import { Button } from "@vllnt/ui";

export function SaveButton() {
  return <Button>Save</Button>;
}

Add a registry component

Use the shadcn CLI when you want the component source copied into your project:

pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/button.json

Replace button with any component slug from the component index.

Tailwind setup

Package installs and registry installs need slightly different setup:

Package installs import @vllnt/ui/styles.css once, use @vllnt/ui/tailwind-preset, and scan your app source files in content.
Registry installs copy component source into your app. Keep Tailwind configured for your app styles, and make sure Tailwind content scanning includes the destination paths where the shadcn CLI writes those copied components.

// tailwind.config.ts
export default {
  content: [
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./registry/**/*.{ts,tsx}",
  ],
};

The exact registry paths depend on your shadcn components.json aliases. Include whichever local directories receive copied VLLNT UI components.

Use @vllnt/ui/themes/default.css instead of @vllnt/ui/styles.css only when you intentionally want the package theme variables without Tailwind base layer styles. The theme file is variables-only; it is not a substitute for the full package stylesheet. Keep registry-generated utility classes intact unless you know the rendered states no longer need them.

First component checklist

Install one small component, such as button or badge.
Import it from the copied local path or from @vllnt/ui, depending on your chosen install mode.
Render it in a page with light and dark mode enabled.
Run your app lint and typecheck before adding more components.