FoundryKit

Integration

How Components fits into a FoundryKit app.

Integration

Use Components when you want more behaviour than Primitives provides but still want to stay inside the FoundryKit package stack.

Typical Composition

import { Calendar, SearchBar } from '@foundrykit/components';
import { Card, CardContent, CardHeader, CardTitle } from '@foundrykit/primitives';

export function SearchPanel() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Search</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <SearchBar />
        <Calendar mode="single" />
      </CardContent>
    </Card>
  );
}
  • Reach for Blocks if you want complete sections instead of individual UI elements.
  • Reach for Hooks if you need the underlying hook behaviour without the packaged UI.
  • Reach for Types when you want to reuse the same search/result interfaces in your own app code.

API

Public exports from @foundrykit/components.

On this page

IntegrationTypical CompositionRelated Packages