Cross-platform design system for Cookest — shared React and Flutter components built from a single source of truth.

UI Component Library Overview

The Cookest UI library provides a unified component set for both web (React) and mobile (Flutter), ensuring pixel-perfect visual parity across platforms. All components are built from shared design tokens defined once in JSON and generated into platform-specific formats via Style Dictionary.

Architecture

Packages

Package	Platform	Install	Path
`@cookest/ui`	Web (React)	`npm install @cookest/ui`	`ui-components/src/`
`cookest_ui`	Mobile (Flutter)	path dependency	`ui-components/flutter/`
`@cookest/ui-cli`	Both	`npx @cookest/ui-cli add <component>`	`ui-components/cli/`

Components (18)

All 18 components are available in both React and Flutter with matching APIs:

Component	React	Flutter	Description
Button	`<Button>`	`CkButton`	Primary, secondary, ghost, danger variants with sizes and loading state
Input	`<Input>`	`CkInput`	Text fields with label, error, helper text, and icon support
Textarea	`<Textarea>`	`CkTextarea`	Multi-line input with character count and auto-resize
Card	`<Card>`	`CkCard`	Content container with header, body, footer sub-components
Badge	`<Badge>`	`CkBadge`	Status indicators with dot and removable support
Avatar	`<Avatar>`	`CkAvatar`	User avatars with image, initials fallback, and group layout
Modal	`<Modal>`	`CkModal`	Dialog overlays with focus trap and animations
Tooltip	`<Tooltip>`	`CkTooltip`	Contextual hints with positioning
Toggle	`<Toggle>`	`CkToggle`	Switch controls with animated thumb
Select	`<Select>`	`CkSelect`	Dropdown selection with search support
Skeleton	`<Skeleton>`	`CkSkeleton`	Loading placeholders for text, circular, and card layouts
Alert	`<Alert>`	`CkAlert`	Glassmorphism banners — info, success, warning, error with size variants
Divider	`<Divider>`	`CkDivider`	Horizontal/vertical separators with optional label
Slider	`<Slider>`	`CkSlider`	Range input with marks, color variants, and value badge
Progress	`<Progress>`	`CkProgress`	Determinate/indeterminate bar with striped and animated modes
Spinner	`<Spinner>`	`CkSpinner`	Animated loading ring with dual-arc design
Tabs	`<Tabs>`	`CkTabs`	Tab navigation — underline, pills, and boxed variants
Accordion	`<Accordion>`	`CkAccordion`	Animated expandable panels — default, bordered, separated

Design Principles

Single source of truth — Tokens are defined once in JSON and generated for each platform
Visual parity — Components look identical on web and mobile
Accessibility first — ARIA attributes (React), semantic widgets (Flutter)
Dark mode built-in — All components support light and dark themes
Tree-shakeable — Import only what you need

Quick Start

React (npm)

npm install @cookest/ui
# or
bun add @cookest/ui

import { Button } from "@cookest/ui";
import "@cookest/ui/styles.css";

export default function App() {
  return <Button variant="primary">Get Started</Button>;
}

React (CLI — copy source into your project)

npx @cookest/ui-cli add button

Flutter

# pubspec.yaml
dependencies:
  cookest_ui:
    path: ../ui-components/flutter

import 'package:cookest_ui/cookest_ui.dart';

MaterialApp(
  theme: CookestTheme.light,
  darkTheme: CookestTheme.dark,
  home: Scaffold(
    body: CkButton(
      onPressed: () {},
      child: Text('Get Started'),
    ),
  ),
);

Flutter (CLI — copy widgets into your project)

npx @cookest/ui-cli add button --flutter

UI Component Library Overview

On this page