FoundryKit

Overview

Low-level UI primitives built on Radix UI and Tailwind CSS

Primitives

The @foundrykit/primitives package provides a collection of low-level UI primitives built on top of Radix UI and styled with Tailwind CSS. These primitives serve as the foundation for building more complex components and applications.

Overview

FoundryKit primitives are designed to be:

  • Accessible by default - Built on Radix UI primitives with WCAG compliance
  • Highly customizable - Flexible styling with Tailwind CSS and class-variance-authority
  • Type-safe - Full TypeScript support with proper type definitions
  • Composable - Designed to work together to create complex UI patterns
  • Performance optimized - Lightweight and efficient components

Quick Start

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

function QuickExample() {
  return (
    <div className="space-y-4">
      <div>
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="Enter your email" />
      </div>
      <Button>Submit</Button>
    </div>
  )
}

Component Categories

Form Components

  • Button - Interactive button with multiple variants
  • Input - Form input with validation states
  • Label - Accessible label component
  • Textarea - Multi-line text input
  • Checkbox - Checkbox input component
  • Radio Group - Radio button group
  • Switch - Toggle switch component
  • Select - Dropdown select component

Layout Components

  • Card - Container for grouping content
  • Separator - Visual separator component
  • Skeleton - Loading skeleton component
  • Tabs - Tab navigation component

Overlay Components

  • Dialog - Modal dialog component
  • Popover - Floating content component
  • Dropdown Menu - Context menu component

Display Components

  • Avatar - User avatar component
  • Badge - Status indicator component

Key Features

Variants and Sizes

All components support multiple variants and sizes for consistent design:

<Button variant="default" size="md">Default</Button>
<Button variant="destructive" size="lg">Destructive</Button>
<Button variant="outline" size="sm">Outline</Button>

Accessibility

Built-in accessibility features including:

  • ARIA attributes
  • Keyboard navigation
  • Focus management
  • Screen reader support
  • High contrast mode support

Theming

Easy customization with CSS variables and Tailwind CSS:

:root {
  --color-primary: oklch(0.55 0.15 250);
  --color-secondary: oklch(0.95 0.01 250);
  --radius: 0.5rem;
}

Installation

pnpm add @foundrykit/primitives

Dependencies

  • React 19+ - For React components and hooks
  • Radix UI - For accessibility primitives
  • Tailwind CSS - For styling (v4 recommended)
  • class-variance-authority - For component variants
  • clsx & tailwind-merge - For class management

Next Steps

Package Structure

The primitives package is organized as follows:

package.json
tsconfig.json
README.md