← ClaudeAtlas

daub-uilisted

Use when building UI with DAUB, the considered CSS component library from daub.dev. Trigger phrases: "daub", "daub.dev", "considered components", "db- components", "tactile UI kit"
sliday/daub · ★ 37 · Web & Frontend · score 72
Install: claude install-skill sliday/daub
# DAUB UI — Component Library DAUB is a drop-in CSS + JS library with 73 considered components and 20 theme families (40 variants). Thoughtfully composed, no ceremony required. npm: `daub-ui` | CDN: `cdn.jsdelivr.net/npm/daub-ui@latest/daub.css` Machine-readable component reference: `https://daub.dev/components.json` TypeScript declarations: `https://daub.dev/daub.d.ts` ## Include (CDN) ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.css"> <script src="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.js"></script> ``` Alternative CDN: ```html <link rel="stylesheet" href="https://unpkg.com/daub-ui@latest/daub.css"> <script src="https://unpkg.com/daub-ui@latest/daub.js"></script> ``` npm install: ```bash npm install daub-ui ``` Optional fonts (falls back gracefully): ```html <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@300..900&family=Source+Serif+4:wght@300..900&family=Cabin:wght@400;500;600;700&display=swap" rel="stylesheet"> ``` ## Class Convention All classes: `db-` prefix. All CSS variables: `--db-` prefix. ## Themes Set: `<html data-theme="dark">` Family API: `DAUB.setFamily('ink')` / `DAUB.setScheme('dark')` / `DAUB.getFamily()` Direct API: `DAUB.setTheme('dark')` / `DAUB.cycleTheme()` / `DAUB.getTheme()` Accent: `DAUB.setAccent('#6B7C3E')` / `DAUB.resetAccent()` Families (20): default, grunge, solarized, ink, ember, bone, dracula, nord, one-dark, monokai, gruvbox, night-owl, github, catppuccin, tokyo