FoundryKit

Components

Complete list of available primitive components

Components

FoundryKit primitives provides a comprehensive set of low-level UI components built on Radix UI and styled with Tailwind CSS.

Form Components

Button

Interactive button component with multiple variants and sizes.

import { Button } from '@foundrykit/primitives'

function ButtonExample() {
  return (
    <div className="space-x-2">
      <Button variant="default">Default</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

Variants: default, destructive, outline, secondary, ghost, link Sizes: sm, md, lg

Input

Form input component with validation states.

import { Input } from '@foundrykit/primitives'

function InputExample() {
  return (
    <div className="space-y-2">
      <Input placeholder="Enter text..." />
      <Input type="email" placeholder="Enter email..." />
      <Input type="password" placeholder="Enter password..." />
      <Input disabled placeholder="Disabled input" />
    </div>
  )
}

Label

Accessible label component for form inputs.

import { Label, Input } from '@foundrykit/primitives'

function LabelExample() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email address</Label>
      <Input id="email" type="email" />
    </div>
  )
}

Textarea

Multi-line text input component.

import { Textarea, Label } from '@foundrykit/primitives'

function TextareaExample() {
  return (
    <div className="space-y-2">
      <Label htmlFor="message">Message</Label>
      <Textarea 
        id="message" 
        placeholder="Enter your message..."
        rows={4}
      />
    </div>
  )
}

Checkbox

Checkbox input component with proper accessibility.

import { Checkbox, Label } from '@foundrykit/primitives'

function CheckboxExample() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  )
}

Radio Group

Radio button group component for single selection.

import { RadioGroup, RadioGroupItem, Label } from '@foundrykit/primitives'

function RadioGroupExample() {
  return (
    <RadioGroup defaultValue="option-one">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-one" id="option-one" />
        <Label htmlFor="option-one">Option One</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-two" id="option-two" />
        <Label htmlFor="option-two">Option Two</Label>
      </div>
    </RadioGroup>
  )
}

Switch

Toggle switch component.

import { Switch, Label } from '@foundrykit/primitives'

function SwitchExample() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

Select

Dropdown select component.

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@foundrykit/primitives'

function SelectExample() {
  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="orange">Orange</SelectItem>
      </SelectContent>
    </Select>
  )
}

Layout Components

Card

Container component for grouping related content.

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@foundrykit/primitives'

function CardExample() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here</p>
      </CardContent>
    </Card>
  )
}

Separator

Visual separator component.

import { Separator } from '@foundrykit/primitives'

function SeparatorExample() {
  return (
    <div>
      <p>Content above</p>
      <Separator className="my-4" />
      <p>Content below</p>
    </div>
  )
}

Skeleton

Loading skeleton component.

import { Skeleton } from '@foundrykit/primitives'

function SkeletonExample() {
  return (
    <div className="space-y-2">
      <Skeleton className="h-4 w-[250px]" />
      <Skeleton className="h-4 w-[200px]" />
      <Skeleton className="h-4 w-[300px]" />
    </div>
  )
}

Tabs

Tab navigation component.

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@foundrykit/primitives'

function TabsExample() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        Account settings content
      </TabsContent>
      <TabsContent value="password">
        Password settings content
      </TabsContent>
    </Tabs>
  )
}

Overlay Components

Dialog

Modal dialog component.

import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@foundrykit/primitives'

function DialogExample() {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>
            Dialog description goes here
          </DialogDescription>
        </DialogHeader>
        <p>Dialog content goes here</p>
      </DialogContent>
    </Dialog>
  )
}

Popover

Floating content component.

import { Popover, PopoverContent, PopoverTrigger } from '@foundrykit/primitives'

function PopoverExample() {
  return (
    <Popover>
      <PopoverTrigger>Open Popover</PopoverTrigger>
      <PopoverContent>
        <p>Popover content goes here</p>
      </PopoverContent>
    </Popover>
  )
}

Context menu component.

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@foundrykit/primitives'

function DropdownMenuExample() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Item 1</DropdownMenuItem>
        <DropdownMenuItem>Item 2</DropdownMenuItem>
        <DropdownMenuItem>Item 3</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Display Components

Avatar

User avatar component.

import { Avatar, AvatarFallback, AvatarImage } from '@foundrykit/primitives'

function AvatarExample() {
  return (
    <Avatar>
      <AvatarImage src="/path/to/image.jpg" alt="User" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  )
}

Badge

Status indicator component.

import { Badge } from '@foundrykit/primitives'

function BadgeExample() {
  return (
    <div className="space-x-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  )
}

Component Composition

Primitives are designed to be composed together to create complex UI patterns:

import { Card, CardContent, CardHeader, CardTitle, Input, Label, Button } from '@foundrykit/primitives'

function ComplexForm() {
  return (
    <Card className="w-[400px]">
      <CardHeader>
        <CardTitle>User Registration</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name">Full Name</Label>
          <Input id="name" placeholder="Enter your full name" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="Enter your email" />
        </div>
        <Button className="w-full">Register</Button>
      </CardContent>
    </Card>
  )
}

Next Steps