@foundrykit/components

@foundrykit/components

A collection of pre-built, styled React components built on top of @foundrykit/primitives. These components provide ready-to-use UI elements with consistent styling and behavior.

Features

• Pre-styled components - Ready-to-use with consistent design
• Built on primitives - Leverages @foundrykit/primitives for accessibility
• TypeScript support - Full type safety with comprehensive definitions
• Customizable - Easy to override styles and behavior
• Consistent API - Uniform component patterns across the library

Installation

pnpm add @foundrykit/components

Available Components

Data Entry

• Calendar - Date picker calendar component
• Date Picker - Complete date selection interface
• Search Bar - Search input with suggestions and filters

Navigation

• Command - Command palette interface for keyboard navigation
• Pagination - Page navigation with configurable page sizes

Usage

Basic Example

import { Calendar } from '@foundrykit/components/calendar';
import { DatePicker } from '@foundrykit/components/date-picker';
import { SearchBar } from '@foundrykit/components/search-bar';

function MyApp() {
  return (
    <div>
      <SearchBar
        placeholder='Search...'
        onSearch={query => console.log(query)}
      />

      <DatePicker onDateSelect={date => console.log(date)} />

      <Calendar mode='single' onSelect={date => console.log(date)} />
    </div>
  );
}

Component Configuration

Each component can be configured through its config file:

import { Calendar } from '@foundrykit/components/calendar'

// Use default configuration
<Calendar />

// Override with custom configuration
<Calendar
  className="custom-calendar"
  disabled={false}
  mode="range"
/>

Styling

Components come with default styling but can be customized:

import { SearchBar } from '@foundrykit/components/search-bar';
import { cn } from '@foundrykit/utils';

function CustomSearchBar({ className, ...props }) {
  return (
    <SearchBar
      className={cn('rounded-lg border-2 border-blue-500', className)}
      {...props}
    />
  );
}

Component Structure

Each component is organized as follows:

component/
├── config.ts          # Component configuration and variants
├── index.tsx          # Main component exports
├── variants-grid.tsx  # Component variants for documentation
└── README.md          # Component-specific documentation

Dependencies

• @foundrykit/primitives - Base UI primitives
• @foundrykit/types - TypeScript type definitions
• @foundrykit/utils - Utility functions
• React - UI framework
• date-fns - Date manipulation utilities
• cmdk - Command palette functionality

Integration with Primitives

Components are built on top of primitives for maximum flexibility:

import { Calendar } from '@foundrykit/components/calendar'
import { Calendar as CalendarPrimitive } from '@foundrykit/primitives/calendar'

// Use the pre-styled component
<Calendar />

// Or use the primitive directly for custom styling
<CalendarPrimitive className="my-custom-styles" />

Customization

Theme Integration

Components work with your existing theme system:

import { SearchBar } from '@foundrykit/components/search-bar';

// Components automatically use your theme tokens
<SearchBar className='bg-background text-foreground' />;

Variant System

Many components support variants for different use cases:

import { SearchBar } from '@foundrykit/components/search-bar'

<SearchBar variant="default" />
<SearchBar variant="outline" />
<SearchBar variant="ghost" />

Accessibility

All components inherit accessibility features from their underlying primitives:

• Keyboard navigation
• Screen reader support
• Focus management
• ARIA attributes
• Color contrast compliance

Contributing

When adding new components:

• Build on existing primitives when possible
• Follow the established component structure
• Include comprehensive TypeScript definitions
• Add usage examples and documentation
• Ensure accessibility compliance
• Update this README

License

MIT