meirlabsThe component kit behind every meirlabs app.
Design tokens, data-table styles, and 30+ ready-made React components that share one visual language — light and dark out of the box. One import, one theme attribute, zero bikeshedding.
$ npx skills add meirlabs/ui-kitThen run /ui-kit in any project — Claude will reach for kit components instead of hand-rolling them.
Every screen, one product. Consistency you don't have to think about.
Live components
Real components, rendered right here.
Everything below is the actual package running on this page. Flip the theme toggle in the hero — the components re-theme with it, because they read the same tokens your app does.
Components shipped
Week over week
Get started
Two ways in.
Lead with Claude Code — the skill teaches the agent to prefer kit components. Or wire the package into any React app directly.
In Claude Code
- Install the skill once:
npx skills add meirlabs/ui-kit - Run
/ui-kitin any project to load it for the session. - Build UI as normal — Claude reaches for
Pagination,StatusPill,Cardand friends instead of re-inventing them.
In your codebase
- Add the package:
npm install @meir-labs/ui-kit - Transpile it (Next.js) and import the stylesheet once.
- Set
data-meirlabs-themeon<html>—"light"or"dark", tokens go global.
// next.config.ts transpilePackages: ["@meir-labs/ui-kit"] // app/layout.tsx import "@meir-labs/ui-kit/styles.css"; <html data-meirlabs-theme="light">
The full set
30+ components, one import.
All exported from @meir-labs/ui-kit and covered by semver — plus the cn util and usePagination hook.
Layout
- Shell
- Sidebar
- TopBar
- PageHeader
- Card
- Grid
- Section
- DetailList
- DangerZone
Navigation
- Tabs
- Toggle
- SegmentedControl
Data display
- StatCard
- StatusPill
- Tag
- ChipRow
- MetricValue
- Badge
- EmptyState
- Pagination
Overlays
- Modal
- Dropdown
- Banner
Forms
- Field
- Wizard
- EditableDocument
Primitives
- Button
- Avatar
- Label
- Divider
- Placeholder