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.

Cross-Platform Support

Cookest UI aims for 100% parity between our React and Flutter libraries. Below is the current status of component availability across platforms.

ComponentReact (@cookest/ui)Flutter (cookest_ui)
Button
Card
Input
Badge
Alert
CheckboxNew
LabelNew
SeparatorNew
Alert DialogNew
DrawerNew
Radio GroupNew
SwitchNew
BreadcrumbNew
Progress
Skeleton
Slider
Tabs
Tooltip
Modal
ChartIn Progress
CarouselIn Progress
CalendarIn Progress
CommandIn Progress
SheetIn Progress
TableIn Progress

* We are currently porting 15+ more components to Flutter. Check back daily for updates.

Browse Components

Explore all 19 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!