Flutter docs
Default skin

@ceebee/ui

A complete application toolkit: 73 documented components, a token layer that repaints all of them from one file, and the motion and onboarding pieces a plain component library leaves out. Published to npm and imported — never copied into a project, so a fix reaches every app on pnpm up.

Total balance
120,456.50

+2.4%

Task progress
84%
84%

The two entries

The package splits at the React Server Component boundary, and the split is deliberate: a content-heavy page can be built from @ceebee/ui alone and ship no animation runtime at all.

  • @ceebee/ui — server-safe. Surface, Flex, Grid, Container, Text, Heading, PageContainer, and the widgets Donut and Leaderboard.
  • @ceebee/ui/client — carries "use client". The whole interactive catalogue — Button, Form, Input, Select, Table, Modal, Tabs, chart-backed Sparkline and BarMini, and the rest — plus the app shell (Sidebar, TopBar), CommandPalette, Checklist, and the providers.

Do

Import from the server entry by default, and reach for /client only when the component actually needs to listen or animate.

Don't

Import everything from /client because it always works — that quietly turns a whole page into a Client Component.

What this library refuses to do

Saying no is what keeps it small enough to maintain alone.

  • No second chart engine. Time-series and mini charts use Lightweight Charts; Schedule uses its dedicated Gantt substrate. Donut and TargetBars are non-time-series exceptions with their own focused rendering contracts.
  • No memory. Whether a person has already completed an onboarding step is passed in by your app. The library never learns who your users are.
  • No second way to do the same thing. Where a component already exists, there is exactly one of it. Anything superseded is removed rather than kept as an alias.

Where to start

  • Tokens — the values every component reads. Change these and the whole catalogue changes with them.
  • Theming — light and dark, Skins, and how a brand gets applied in one file.
  • Button — the smallest complete example of how a component page is laid out: live demos, their source, and the full API table.
  • Changelog — what changed, and what breaks when you upgrade.