@vllnt/ui

313 accessible React components built on primitives, styled with , powered by .

License: MIT
[blocked]

· · ·

Features

  • 313 components — primitives (Button, Input), composites (Command, DataTable, Carousel), and domain families (AI, Financial, Ops, Educational, Billing, Animation, Maps, Canvas, Timelines)
  • Accessible by default — Radix UI handles focus, keyboard nav, and ARIA
  • Tailwind CSS + CVA — variant-driven styling with full theme override via CSS variables
  • shadcn-compatible registry — install individual components with shadcn add
  • TypeScript strict — fully typed with exported prop interfaces
  • Tested — unit tests (Vitest) + visual regression (Playwright CT) + Storybook

Install

bash
pnpm add @vllnt/ui

Published on the public with signed provenance. See packages/ui/README.md [blocked] for full setup.

shadcn registry

Install individual components with the CLI — no package dependency, you own the code:

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

Or by @vllnt-ui namespace once it's in the (add "@vllnt-ui": "https://ui.vllnt.com/r/{name}.json" to your components.json registries):

bash
pnpm dlx shadcn@latest add @vllnt-ui/button

Quick Start

tsx
import "@vllnt/ui/styles.css";import { Button, Card, Badge } from "@vllnt/ui";
export default function App() {  return (    <Card>      <Badge variant="secondary">New</Badge>      <Button variant="default">Get Started</Button>    </Card>  );}

Tailwind Preset

ts
// tailwind.config.tsimport uiPreset from "@vllnt/ui/tailwind-preset";
export default {  presets: [uiPreset],  content: ["./src/**/*.{ts,tsx}"],};

shadcn Registry

Install individual components directly:

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

Development

bash
git clone https://github.com/vllnt/ui.gitcd uipnpm installpnpm dev
ScriptDescription
pnpm devStart dev servers
pnpm buildBuild all packages
pnpm lintLint all packages
pnpm test:onceRun tests (single run)
pnpm check:circularDetect circular imports

Theming

Override CSS variables after importing styles:

css
:root {  --primary: 222.2 47.4% 11.2%;  --primary-foreground: 210 40% 98%;}

Components

All 313 components
CategoryComponents
Primitives (Radix)Accordion, Alert Dialog, Aspect Ratio, Avatar, Checkbox, Collapsible, Context Menu, Dialog, Dropdown Menu, Hover Card, Label, Menubar, Navigation Menu, Popover, Radio Group, Scroll Area, Select, Separator, Slider, Switch, Tabs, Toggle, Toggle Group, Tooltip
LayoutCard, Carousel, Resizable, Sheet, Drawer, Horizontal Scroll Row, View Switcher
FormsButton, Input, Input OTP, Inline Input, Number Input, Password Input, Textarea, Date Picker, File Upload, Combobox, Command, Rating
FeedbackAlert, Badge, Callout, Skeleton, Spinner, Toast, Tour
NavigationBreadcrumb, Pagination, Sidebar, Sidebar Provider, Sidebar Toggle, Search Bar, Search Dialog, Keyboard Shortcuts Help, Floating Action Button, Social FAB
Data / ChartsArea Chart, Bar Chart, Line Chart, Candlestick Chart, Sparkline Grid, Market Treemap, Order Book, Ticker Tape, Metric Gauge, Activity Heatmap, Activity Log, Table, Data Table, Data List, Stat Card, Number Ticker
AIAIChatInput, AIMessageBubble, AISourceCitation, AIStreamingText, AIToolCallDisplay, ThinkingBlock
FinancialCandlestick Chart, Market Treemap, Order Book, Ticker Tape, Wallet Card, Watchlist, Sparkline Grid
Ops / StatusStatus Board, Status Indicator, Live Feed, World Clock Bar, Severity Badge, Role Badge, Scope Selector
Billing / PlansSubscription Card, Plan Badge, Credit Badge, Usage Breakdown
ContentBlog Card, Pro Tip, Callout, Code Block, Code Playground, Comparison, FAQ, Flow Diagram, MDX Content, Profile Section, Terminal, Video Embed, Marquee, Animated Text, Border Beam, Number Ticker, TL;DR Section, Share Section, Share Dialog
Tutorial / EducationalContent Intro, Exercise, Flashcard, Key Concept, Learning Objectives, Progress Bar, Progress Card, Quiz, Step-by-Step, Step Navigation, Stepper, Tutorial Card, Tutorial Complete, Tutorial Filters, Tutorial Intro Content, Tutorial MDX, Checklist, Annotation, Completion Dialog, Truncated Text, Table of Contents, Table of Contents Panel
App ShellNavbar SaaS, Model Selector, Lang Provider, Theme Provider, Theme Toggle, Category Filter, Filter Bar, Cookie Consent, Slideshow, Countdown Timer, Avatar Group

AI agents

Building with an AI coding agent? Install the vllnt-ui skill [blocked] — it gives agents the component set, design tokens, and usage patterns, pointing to the live registry and for current detail. Agents working in this repo should read AGENTS.md [blocked].

Contributing

See CONTRIBUTING.md [blocked]. Bugs and feature requests: . Security: SECURITY.md [blocked].

License

MIT [blocked]