@usevane/ui

Moe-Brutalist component library for Vane. Hard borders, hard shadows, instant snaps. Soft things living in a hard world.

40 React components with WCAG AA accessibility, Tailwind CSS v4 tokens, and the snap interaction system.

Install

bun add @usevane/ui
# or
npm install @usevane/ui

Peer Dependencies

• react >= 19.0.0
• react-dom >= 19.0.0
• tailwindcss >= 4.0.0

Theme Setup

Import the theme CSS in your global stylesheet or copy the tokens into your own @theme block:

@import "@usevane/ui/theme.css";

Or cherry-pick tokens:

@theme {
  --color-void: #050505;
  --color-surface: #0f0f0f;
  --color-pink: #FF9ECA;
  --color-cyan: #74F6F4;
  --color-lavender: #C9B8FF;
  --color-peach: #FFD4A8;
  --color-threat: #FF0055;
  --color-critical: #FFE500;
  --color-secondary: #888888;

  --font-display: 'Syne', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --shadow-hard: 3px 3px 0px #ffffff;
  --shadow-hard-pink: 5px 5px 0px #FF9ECA;
  --shadow-hard-focus: 5px 5px 0px #74F6F4;
  --shadow-hard-threat: 5px 5px 0px #FF0055;
  --shadow-hard-sm: 1px 1px 0px #ffffff;
}

Usage

import { Button, Card, CardContent, DataModule, DataModuleLabel, DataModuleValue } from '@usevane/ui'

<Button variant="default">INSTALL NOW</Button>
<Button variant="threat">BLOCK</Button>

<Card>
  <CardContent>
    <DataModule>
      <DataModuleLabel>SIGNALS TODAY</DataModuleLabel>
      <DataModuleValue color="pink">1,204,847</DataModuleValue>
    </DataModule>
  </CardContent>
</Card>

Components

Buttons

Button SignOutButton

Data Display

DataModule DataModuleLabel DataModuleValue StatusBadge Badge DataStack DataStackItem

Forms

Input Select Textarea Label FormField

Layout

Card CardHeader CardTitle CardContent CardFooter Grid Stack Heading Separator Spacer PageHeader TopBar Sidebar MobileMenu NavLink

Feedback

Modal ConfirmDialog ToastProvider useToast Alert AlertTitle AlertDescription

Command Palette

CommandPalette CommandProvider useCommands Kbd

Data Tables

DataTable DataTableHeader DataTableBody DataTableRow DataTableHead DataTableCell Tabs CopyBlock EmptyState Skeleton

Charts (Recharts)

SignalTimeline MethodBreakdown TopPaths

Documentation

CodeBlock InlineCode ApiRoute ApiParam ApiParams Callout DocH1 DocH2 DocH3 DocH4

Error Pages

ErrorPage NotFoundPage ServerErrorPage

Utilities

cn

Design System

Built on the Moe-Brutalist design system:

• No rounded corners. rounded-none on everything.
• No blur shadows. Hard offset shadows only.
• No transitions. The UI snaps between states.
• Syne + IBM Plex Mono. The font clash IS the aesthetic.
• WCAG AA accessible. All colors pass 4.5:1 contrast. Focus states, ARIA roles, 44px touch targets.

License

MIT