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.
Navigation
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.)