@vetaui/atoms

The smallest reusable UI building blocks in the Veta design system. Every component consumes @vetaui/foundations design tokens — they theme automatically with any Veta preset and respect data-theme="dark" out of the box.

Install

pnpm add @vetaui/foundations @vetaui/atoms

Setup

/* app/globals.css */
@import "tailwindcss";
@import "@vetaui/foundations/css";
@import "@vetaui/foundations/reset";

Usage

import { Button, Input, Badge, Card, CardHeader, CardTitle, CardContent } from "@vetaui/atoms";

export default function Example() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Join the waitlist</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <Input type="email" placeholder="[email protected]" />
        <Button fullWidth>Notify me</Button>
        <Badge variant="brand">Launching soon</Badge>
      </CardContent>
    </Card>
  );
}

Component catalog

Inputs

| Component | Description | | --- | --- | | Button | Pressable button — 6 variants, 4 sizes, asChild polymorphism | | Input | Text input — size + state variants (default / error / success) | | NumberInput | Numeric input with stepper buttons (min / max / step) | | MaskedInput | Input with IMask-based formatting (phone, date, credit card…) | | Textarea | Multi-line text input — size, state, resize variants | | Checkbox | Accessible checkbox with indeterminate state | | Switch | Toggle switch | | RadioGroup / RadioGroupItem | Accessible radio group | | Select | Native-like dropdown built on Radix Select | | Slider | Range slider | | Rating | Star/custom rating picker with full ARIA |

Display

| Component | Description | | --- | --- | | Badge | Inline status/label chip — 6 variants | | Card + parts | Surface container (CardHeader, CardTitle, CardDescription, CardContent, CardFooter) | | Avatar + parts | User avatar with image + initials fallback | | Spinner | Loading indicator with accessible role="status" | | Skeleton | Animated placeholder | | Progress | Linear progress bar | | Label | Accessible form label | | Separator | Horizontal / vertical divider | | Alert | Inline feedback banner | | Code | Inline <code> with monospace styling | | Kbd | Keyboard shortcut chip |

Layout / Utility

| Component | Description | | --- | --- | | ScrollArea | Custom scrollbar via Radix | | AspectRatio | Responsive ratio-locked box | | Collapsible + parts | Animated expandable section | | VisuallyHidden | Screen-reader-only wrapper | | Table + parts | Bare HTML table with Veta styling |

Variants

All variant systems use class-variance-authority (cva). Override any class with className — tailwind-merge resolves conflicts automatically.

<Button variant="outline" size="sm" className="rounded-full">
  Custom
</Button>

Available button variants: primary, secondary, outline, ghost, link, destructive.

Icon-only buttons

When using a Button with only an icon (no visible text), always provide aria-label:

import { Pencil } from "lucide-react";

<Button variant="ghost" size="icon" aria-label="Edit">
  <Pencil className="size-4" />
</Button>

License

MIT — Dambert Munoz