FoundryKit

Components

High-level UI components built on top of primitives

Components

The @foundrykit/components package provides a collection of high-level UI components built on top of the primitives package. These components are ready-to-use and can be easily integrated into your applications.

Features

  • Built on primitives: All components are composed using the primitives package
  • Production ready: Tested and optimized for production use
  • Customizable: Easy to customize and extend
  • TypeScript support: Full TypeScript support with proper type definitions
  • Accessible: Inherits accessibility features from underlying primitives

Installation

pnpm add @foundrykit/components

Usage

import { Calendar } from '@foundrykit/components'

function MyComponent() {
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  )
}

Available Components

  • Calendar - Date picker component with calendar view
  • Command - Command palette component for search and navigation
  • Data Table - Advanced table component with sorting and filtering
  • Form - Form components with validation
  • Navigation - Navigation components and menus
  • Layout - Layout components for page structure
  • Feedback - Toast, alert, and notification components

Component Categories

Form Components

Components for building forms and collecting user input.

Data Display

Components for displaying data in various formats like tables, lists, and cards.

Components for site navigation and user interface navigation.

Feedback

Components for providing user feedback and notifications.

Layout

Components for structuring page layouts and content organization.

Styling

Components inherit styling capabilities from the primitives package and can be customized using:

  • Tailwind CSS classes
  • Component variants and sizes
  • Custom CSS variables
  • Theme customization

Dependencies

  • @foundrykit/primitives - For underlying UI primitives
  • @foundrykit/types - For TypeScript type definitions
  • @foundrykit/utils - For utility functions
  • React 19+
  • Additional libraries for specific functionality (date-fns, cmdk, etc.)