@deblaca/ui

DeBlaca's reusable React component library — branded, token-themed primitives built on Tailwind CSS and Radix UI, in the same shadcn/ui conventions Daily Deals already uses.

One library, every product. Components carry no hard-coded colors — they read CSS variables, so each product re-skins the whole set by overriding a handful of tokens (no fork).

Install

npm install @deblaca/ui

Peer dependencies: react and react-dom (^18).

Usage

Import the stylesheet once (e.g. in your root layout / entry), then use components anywhere:

import '@deblaca/ui/styles.css'
import { Button, Card, CardHeader, CardTitle, CardContent } from '@deblaca/ui'

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Create deal</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="accent">Publish</Button>
      </CardContent>
    </Card>
  )
}

Theming (the point of the library)

The default theme is DeBlaca navy + green, defined as CSS variables in src/styles/tokens.css. To re-skin for a product, override the variables in your own CSS — nothing else changes:

/* Daily Deals keeps its orange — only this line differs */
:root {
  --primary: 24 95% 53%;
  --ring: 24 95% 53%;
}

Values are HSL channels (no hsl() wrapper) so Tailwind can compose alpha: hsl(var(--primary) / 0.5). Add class="dark" to a wrapping element for the dark theme.

Token reference (override any of these): --background, --foreground, --card(-foreground), --popover(-foreground), --primary(-foreground), --secondary(-foreground), --muted(-foreground), --accent(-foreground), --destructive(-foreground), --border, --input, --ring, --radius.

Components (v1)

Primitives: Button · Input · Textarea · Label · Badge · Checkbox · Switch · Separator · Avatar

Composite / overlay: Card (+ Header/Title/Description/Content/Footer) · Select · Dialog · Tabs · DropdownMenu · Tooltip · Table · Alert · Toaster/toast (Sonner)

Plus the cn() class-merge helper. 18 components in total.

Tooltip needs a TooltipProvider ancestor; Toaster should be rendered once near your app root, then call toast() anywhere.

Development

npm install
npm run storybook       # component explorer at http://localhost:6006
npm run typecheck       # tsc --noEmit
npm run build           # ESM + CJS + types (dist/index.*) and dist/styles.css
npm run build-storybook # static Storybook

Each component lives in src/components/<name>/ with its implementation and a .stories.tsx.

Stack

React 18 · TypeScript 5 · Tailwind 3.4 · Radix UI · class-variance-authority · Vite (library build) · Storybook 8. This repo is structured so it can be synced to Claude Design (claude.ai/design) via the design-sync skill, making the design agent build with DeBlaca's real components.