dafke-ui
v0.1.1
Published
A minimal shadcn-style UI library. Copy components straight into your repo via the CLI.
Downloads
243
Maintainers
dafkeReadme
DafkeUI
A minimal, shadcn-style component library implementing the Pasport design system — a Linear/Vercel/Notion-inspired look with a teal accent and full light + dark theming. Components aren't installed as a dependency: the CLI copies the source straight into your repo, so you own and can edit every component.
Stack: React + TypeScript + Tailwind CSS (design tokens via CSS variables).
Per-repo install
In any React + Tailwind project:
# 1. scaffold config (detects your @/ alias)
npx dafke-ui init
# 2. add components — dependencies are pulled in automatically
npx dafke-ui add button # also copies icon + theme.css
npx dafke-ui add all # everything at onceThen import the theme once at your app root and pick a mode:
import "@/components/ui/theme.css"
// light is default; for dark set on <html>:
document.documentElement.dataset.theme = "dark"While developing locally (before publishing), run the CLI from this repo:
node /path/to/DafkeUI/bin/cli.js add all
Usage
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
export function Example() {
return (
<div className="flex gap-2">
<Button icon="plus">New</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger" icon="trash">Delete</Button>
<Badge tone="green" dot>Active</Badge>
</div>
)
}Components
All components are styled with Tailwind utilities + the design tokens in theme.css, follow the forwardRef pattern, and are dependency-free (only React) unless noted.
Primitives: button, badge, field, input, textarea, select, toggle, checkbox, segmented, card, section, table, data-grid, avatar, user-avatar, app-icon, icon, modal, drawer, divider, kbd, skeleton, spinner, tabs, alert, progress, ring, empty-state, user-menu, user-dropdown, dropdown, navbar, sidebar.
Form inputs: password-input, password-strength, otp-input, file-upload, date-picker, emote-rating.
Data viz: sparkline, bar-chart, line-chart, donut, qr-code, day-grid.
Effects & hooks: confetti (Web Animations API), use-voice (speech-to-text hook) — dependency-free.
Motion (powered by framer-motion, installed automatically): fade-in, motion-list, motion-card, accordion, toast, number-ticker, motion-button, success-checkmark, animated-input, page-transition.
Plus theme (the theme.css tokens). Run npx dafke-ui list to see everything.
Design tokens
theme.css defines the Pasport palette as CSS variables — teal --accent, slate neutrals (--surface, --border, --text…), status colors, a radius scale (--r-xs…--r-2xl), shadows, and the Hanken Grotesk / JetBrains Mono fonts. Dark mode swaps every token under [data-theme="dark"].
CLI commands
| Command | Description |
| --- | --- |
| init | Create components.json (detects your @/ alias) |
| add <name> | Copy a component (and its registry dependencies) into your project; add all for everything |
| list | Show available components |
| help | Show usage |
Flag: --skip-install — don't auto-install npm dependencies.
Adding more components
- Drop the component source in
registry/. - Register it in
registry/index.jsonwith itsfiles, npmdependencies, andregistryDependencies(other components it imports, e.g.icon/theme).
The CLI resolves registryDependencies automatically, so add button also copies icon and theme.
Showcase site
A live showcase with a page per component lives in site/ (Vite + React + Tailwind). It imports the component sources straight from registry/, so what you see is the real thing.
cd site
npm install
npm run dev # local dev server
npm run build # production build into site/distThe sidebar has a page per component grouped by category, a light/dark toggle, and Replay buttons on the Motion pages.
Config
components.json (created by init) controls where files land:
{
"aliases": {
"components": "src/components"
}
}