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.

Features

• Accessible by default: All primitives are built on Radix UI primitives, ensuring excellent accessibility out of the box
• Customizable styling: Built with Tailwind CSS and class-variance-authority for flexible theming
• TypeScript support: Full TypeScript support with proper type definitions
• Composable design: Each primitive is designed to be composed with others to create complex UI patterns

Installation

pnpm add @foundrykit/primitives

Usage

import { Button } from '@foundrykit/primitives'

function MyComponent() {
  return (
    <Button variant="default" size="md">
      Click me
    </Button>
  )
}

Available Primitives

• Button - Interactive button component with multiple variants
• Input - Form input component with validation states
• Label - Accessible label component
• Dialog - Modal dialog component
• Dropdown Menu - Context menu component
• Select - Dropdown select component
• Switch - Toggle switch component
• Checkbox - Checkbox input component
• Radio Group - Radio button group component
• Tabs - Tab navigation component
• Avatar - User avatar component
• Separator - Visual separator component
• Popover - Floating content component

Styling

All primitives use Tailwind CSS for styling and support:

• Variants: Different visual styles (default, destructive, outline, etc.)
• Sizes: Different size options (sm, md, lg)
• States: Hover, focus, disabled, and loading states
• Customization: Easy to customize with Tailwind classes

Dependencies

• React 19+
• Radix UI primitives
• Tailwind CSS
• class-variance-authority
• clsx and tailwind-merge for class management