UI Components Overview
Accessible, composable UI primitives, form inputs, and data tables built with Base UI and Tailwind CSS.
VitNode provides an accessible component suite built on Base UI and styled with Tailwind CSS in the shadcn base-vega design language.
Quick start
Import components directly from @vitnode/core/components/ui/*:
import { Button } from "@vitnode/core/components/ui/button"
import { ArrowRightIcon } from "lucide-react"
export const ActionButton = () => (
<Button variant="default">
Get Started
<ArrowRightIcon className="size-4" />
</Button>
)No copy-pasting is required: all primitives and form components are exported ready-to-use from @vitnode/core.
Component Layers
| Layer | Import Path | Examples |
|---|---|---|
| Primitives | @vitnode/core/components/ui/* | Button, Dialog, DropdownMenu, Card, Badge |
| Form Inputs | @vitnode/core/components/form/fields/* | AutoFormInput, AutoFormSelect, AutoFormCombobox |
| Complex Views | @vitnode/core/components/* | AutoForm, ContentDataTable |
Design Tokens & Semantic Styling
VitNode adheres strictly to semantic Tailwind tokens for dark/light mode parity:
- Backgrounds:
bg-background,bg-card,bg-muted,bg-popover - Text & Foreground:
text-foreground,text-muted-foreground,text-primary - Borders & Rings:
border-border,ring-ring
Color Palette Convention
VitNode uses exactly 3-5 colors across the UI, avoiding prominent purple/violet styling in favor of modern, high-contrast semantic palettes.