Getting Started
Quick start guide for using FoundryKit primitives
Getting Started
Installation
Install the primitives package using your preferred package manager:
# Using pnpm (recommended)
pnpm add @foundrykit/primitives
# Using npm
npm install @foundrykit/primitives
# Using yarn
yarn add @foundrykit/primitivesBasic Usage
Import and use primitives in your components:
import { Button, Input, Label } from '@foundrykit/primitives'
function MyForm() {
return (
<div className="space-y-4">
<div>
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" placeholder="Enter your email" />
</div>
<Button type="submit">Submit</Button>
</div>
)
}Package Structure
The primitives package is organized as follows:
package.json
tsconfig.json
README.md
Prerequisites
Before using FoundryKit primitives, ensure you have:
- React 19+ - For React components and hooks
- Tailwind CSS - For styling (v4 recommended)
- TypeScript - For type safety (recommended)
Setup with Tailwind CSS
If you haven't set up Tailwind CSS yet, follow these steps:
- Install Tailwind CSS:
pnpm add -D tailwindcss postcss autoprefixer- Initialize Tailwind:
npx tailwindcss init -p- Configure your CSS:
@import "tailwindcss";
/* Your custom styles here */- Import in your app:
// In your main layout or app file
import './globals.css'Next Steps
- Explore the available primitives to see what's available
- Learn about styling and theming to customize the appearance
- Check out accessibility features to ensure your components are accessible
- Review best practices for optimal usage