Skip to content
Quick Start

Getting Started

Get up and running with Cookest UI in under 5 minutes. Install the package, set up your project, and build your first component.

Setup Guide

1

Install the package

Install @cookest/ui using your preferred package manager:

$ bun add @cookest/ui
2

Import the styles

Import the Cookest UI stylesheet in your global CSS file or app entry point. This provides all design tokens and component styles.

css
/* globals.css or app entry */
@import "@cookest/ui/src/styles.css";

If you use Tailwind CSS, import it alongside your Tailwind directives:

css
@import "tailwindcss";
@import "@cookest/ui/src/styles.css";
3

Use a component

Import components from @cookest/ui and use them in your JSX. All components are tree-shakable.

tsx
import { Button, Card, CardBody, Badge } from "@cookest/ui";

export function RecipeCard() {
  return (
    <Card variant="interactive">
      <CardBody>
        <Badge variant="success" dot>Healthy</Badge>
        <h3>Pasta Primavera</h3>
        <p>Fresh vegetables in a light garlic sauce.</p>
        <Button variant="primary" size="sm">
          View Recipe
        </Button>
      </CardBody>
    </Card>
  );
}
4

Run your app

Start the development server and see your component in action:

bash
bun dev

Your First Component

Here is the recipe card from Step 3, rendered live with Cookest UI:

Healthy25 min

Pasta Primavera

Fresh seasonal vegetables tossed in a light garlic and olive oil sauce with al dente penne pasta.

Browse Components

Explore all 12 components with interactive playgrounds.

Explore

See Examples

Real-world UI patterns built with Cookest UI.

Explore

Design Tokens

Colors, typography, spacing, and effects reference.

Explore

Dark Mode Support

Cookest UI includes built-in dark mode. Add the dark class to your <html> element and all CSS variables automatically switch to their dark variants. Try the toggle in the sidebar to see it in action!