UI Primitives

Core UI primitive components including Button, Input, Dialog, Card, Badge, Alert, Select, Tooltip, Tabs, and more built on Radix UI.

Last updated: 2025-02-18

UI Primitives

Certexi's 42 UI primitives are built on Radix UI for accessibility and Tailwind CSS for styling. Each component is fully typed, keyboard-navigable, and WCAG 2.1 AA compliant.

Button

The primary interactive element with multiple variants and sizes:

Button Variants

<div className="flex gap-2 flex-wrap">
  <Button>Default</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="link">Link</Button>
  <Button size="sm">Small</Button>
  <Button size="lg">Large</Button>
  <Button disabled>Disabled</Button>
</div>

Props

Prop	Type	Default	Description
`variant`	`default \| secondary \| destructive \| outline \| ghost \| link`	`default`	Visual style
`size`	`default \| sm \| lg \| icon`	`default`	Size variant
`disabled`	`boolean`	`false`	Disable interaction
`asChild`	`boolean`	`false`	Merge with child element

Input

Text input with built-in validation states:

Input

<div className="flex flex-col gap-2 max-w-sm">
  <Input placeholder="Default input" />
  <Input type="email" placeholder="Email address" />
  <Input type="password" placeholder="Password" />
  <Input disabled placeholder="Disabled" />
</div>

Dialog

Modal dialog built on Radix Dialog primitive:

Dialog

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm Action</DialogTitle>
      <DialogDescription>
        This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Card

Container component for grouping related content:

Card

<Card className="max-w-sm">
  <CardHeader>
    <CardTitle>Transport Unit</CardTitle>
    <CardDescription>TU-2024-00042</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Stage: Weighing</p>
    <p>Weight: 24,500 kg</p>
  </CardContent>
</Card>

Badge

Inline status indicators:

Badge Variants

<div className="flex gap-2">
  <Badge>Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="destructive">Error</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

Alert

Contextual feedback messages:

Alert Variants

<div className="flex flex-col gap-4">
  <Alert>
    <AlertTitle>Notice</AlertTitle>
    <AlertDescription>
      Transport unit TU-2024-00042 has been flagged for inspection.
    </AlertDescription>
  </Alert>
  <Alert variant="destructive">
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>
      Weight variance exceeds tolerance threshold.
    </AlertDescription>
  </Alert>
</div>

Select

Dropdown selection with search and grouping:

Select

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Select zone" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Zones</SelectLabel>
      <SelectItem value="a">Zone A - Storage</SelectItem>
      <SelectItem value="b">Zone B - Staging</SelectItem>
      <SelectItem value="c">Zone C - Cold Storage</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Additional Primitives

Component	Description
Tooltip	Hover/focus information popover
Dropdown Menu	Action menu with keyboard navigation
Context Menu	Right-click menu
Tabs	Tabbed content navigation
Accordion	Collapsible content sections
Avatar	User profile image with fallback
Separator	Visual content divider
Progress	Progress bar indicator
Skeleton	Loading placeholder
Switch	Boolean toggle control
Checkbox	Multi-select option
Radio Group	Single-select option group
Slider	Range value selector
Textarea	Multi-line text input
Toast	Temporary notification
Sheet	Slide-out panel
Popover	Floating content panel
Command	Command palette / search
Calendar	Date picker calendar
Scroll Area	Custom scrollbar container
Table	Data table with sorting

UI Primitives

Button

Props

Input

Dialog

Card

Badge

Alert

Select

Additional Primitives

Related