FoundryKit

Getting Started

Quick start guide for using FoundryKit components

Getting Started

Installation

Install the components package using your preferred package manager:

# Using pnpm (recommended)
pnpm add @foundrykit/components

# Using npm
npm install @foundrykit/components

# Using yarn
yarn add @foundrykit/components

Prerequisites

Before using FoundryKit components, ensure you have:

  • @foundrykit/primitives - Required for underlying UI primitives
  • React 19+ - For React components and hooks
  • Tailwind CSS - For styling (v4 recommended)
  • TypeScript - For type safety (recommended)

Basic Usage

Import and use components in your application:

import { Calendar, Command, SearchBar } from '@foundrykit/components'

function MyApp() {
  return (
    <div className="space-y-6">
      <SearchBar 
        placeholder="Search products..."
        onSearch={(query) => console.log('Searching:', query)}
      />
      
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        className="rounded-md border"
      />
      
      <Command>
        <CommandInput placeholder="Type a command or search..." />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Suggestions">
            <CommandItem>Calendar</CommandItem>
            <CommandItem>Search</CommandItem>
            <CommandItem>Settings</CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    </div>
  )
}

Package Structure

The components package is organized as follows:

package.json
tsconfig.json
README.md

Component Categories

Data Display

  • Calendar - Date picker with calendar view
  • Date Picker - Advanced date selection component
  • Pagination - Page navigation component

User Input

  • Search Bar - Search input with debouncing
  • Command - Command palette for search and navigation

Integration with Primitives

Components are built on top of primitives and can be used together seamlessly:

import { Button, Input, Card } from '@foundrykit/primitives'
import { SearchBar, Calendar } from '@foundrykit/components'

function IntegratedExample() {
  return (
    <Card className="p-6">
      <div className="space-y-4">
        <SearchBar 
          placeholder="Search..."
          onSearch={handleSearch}
        />
        
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
        />
        
        <div className="flex space-x-2">
          <Button>Save</Button>
          <Button variant="outline">Cancel</Button>
        </div>
      </div>
    </Card>
  )
}

Setup with Tailwind CSS

If you haven't set up Tailwind CSS yet, follow these steps:

  1. Install Tailwind CSS:
pnpm add -D tailwindcss postcss autoprefixer
  1. Initialize Tailwind:
npx tailwindcss init -p
  1. Configure your CSS:
@import "tailwindcss";

/* Your custom styles here */
  1. Import in your app:
// In your main layout or app file
import './globals.css'

TypeScript Support

All components include full TypeScript support:

import { Calendar, CalendarProps } from '@foundrykit/components'

interface MyCalendarProps extends CalendarProps {
  customProp?: string
}

function MyCalendar({ customProp, ...props }: MyCalendarProps) {
  return (
    <Calendar {...props}>
      {/* Custom calendar content */}
    </Calendar>
  )
}

Next Steps