A self-contained React design system built on Radix UI primitives, styled with CVA (class-variance-authority) + Tailwind CSS v4 + CSS custom properties for theming.
- UI: DButton, DCard, DBadge, DDialog, DMenu, DAvatar, DSpinner, DSkeleton, DDivider, DMarkdown, DTooltip, DToast, DTable
- Typography: DText, DCardTitle
- Forms: DInput, DTextarea, DCheckbox, DProgressBar, DSlider, DFormField, DSelectField
- Navigation: DBackButton
This package is distributed as source (TypeScript + JSX). The consuming project compiles it.
npm install @davstur/d-libraryIn your global CSS file, import the theme tokens before your Tailwind directives:
@import "@davstur/d-library/tokens/themes.css";
@import "tailwindcss";Add a @theme inline block to connect CSS variables to Tailwind utilities (see the tandemic project's globals.css for the full mapping).
import { DButton, DCard, DText } from "@davstur/d-library";
function MyPage() {
return (
<DCard>
<DText>Hello</DText>
<DButton variant="primary">Click me</DButton>
</DCard>
);
}8 themes are included (default light/dark + brutalist, ocean, sakura, midnight, forest, mono). Apply a theme by setting data-theme on a parent element:
<body data-theme="ocean">Toggle dark mode by adding the dark class to the same element.
DBackButton and DMenuItem accept a linkComponent prop that defaults to a plain <a> tag. In Next.js projects, pass the Link component:
import Link from "next/link";
<DBackButton href="/decks" linkComponent={Link} />
<DMenuItem href="/settings" linkComponent={Link}>Settings</DMenuItem>primitives/- Internal Radix UI wrappers (do not import directly)ui/- High-level UI componentsforms/- Form componentstypography/- Text componentsnavigation/- Navigation componentstokens/- CSS custom property theme definitionsutils.ts-cn()utility (clsx + tailwind-merge)index.ts- Barrel export