Interfaces, Considered.

Thoughtfully composed components that honour materiality. 64 elements, 8 themes, no ceremony. Two files, and your interface has character.

Get Started View Components

<link rel="stylesheet" href="https://daub.dev/daub.css">
<script src="https://daub.dev/daub.js"></script>

Every component is theme-aware. Switch themes with the buttons in the corner and watch this entire page transform.

Zero build step

Just two files: daub.css + daub.js

Subscribe to updates

Dark mode

Warmth 75

AI-Native

Fluent in Machine and Human

Every component speaks both languages — structured references for AI agents, refined aesthetics for discerning humans.

Point any LLM at daub.dev/llms.txt for full component docs with HTML snippets.

Standard ai-plugin.json manifest for AI agent discovery and integration.

Claude Code skill for instant DAUB development — components, themes, and patterns at your fingertips.

1. Foundations — Surfaces & Elevation

Base Surface

Raised Surface

Inset Surface

Pressed Surface

Elevation Scale

Elevation 1

Elevation 2

Elevation 3

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Body text — The quick brown fox jumps over the lazy dog. Charter at 16px with 1.6 line height gives comfortable reading.

Caption text — System UI sans-serif for labels and small text.

2. Controls — Buttons

2b. Controls — Text Fields

Full Name Your display name

Focused Field

Email Please enter a valid email

Disabled

Message

2c. Controls — Checkbox, Radio, Switch, Slider

Checkboxes

Enable notifications Dark mode Auto-save

Radio Group

Small Medium Large

Switches

Wi-Fi

Bluetooth

Location

Slider

Volume 65

Brightness 40

3. Navigation — Tabs

Welcome to the overview panel. DAUB is a warm, tactile UI kit built with care for the 8px grid, organic typography, and the joy of physical materials translated to screen.

28 production-ready components. Vanilla JS + CSS. No build step required. Accessible by default with full keyboard navigation and ARIA attributes.

Free and open source. Drop into any project with just two files: daub.css and daub.js.

3b. Navigation — Breadcrumbs

3c. Navigation — Pagination

3d. Navigation — Stepper

Account

Profile

Settings

Review

4. Data Display — Cards

Passionate about creating interfaces that feel as tangible as the real world. Loves texture and warmth in digital spaces.

Building the bridge between skeuomorphic beauty and modern performance. Ships CSS that sparks joy.

A complete component library with 28 hand-crafted pieces. Warm cream palette, 8px grid, organic feel.

4b. Data Display — List Items

Project Proposal.pdf

Modified 2 hours ago

New

Hero Banner.png

Modified yesterday

daub.css

Modified just now

Updated

4c. Data Display — Badges & Avatars

Badges

New Updated Beta Error

Avatars

4d. Data Display — Table

Name	Category	Score	Status
Button	Controls	98	Stable
Modal	Feedback	95	Stable
Stepper	Navigation	87	New
Toast	Feedback	92	Beta

4e. Data Display — Tooltip

5. Feedback — Modal

5b. Feedback — Toast Stack

5c. Feedback — Alert Banners

Heads up

Your trial expires in 3 days. Upgrade to keep all features.

Did you know?

You can customize all colors via CSS custom properties.

Connection lost

Unable to reach the server. Check your internet connection.

All clear

Your account has been verified successfully.

5d. Feedback — Empty State

No items yet

Get started by creating your first item. It only takes a moment.

5e. Feedback — Skeleton & Progress

Skeleton Loading

Linear Progress

Progress — 30%

Indeterminate

6. New in v2.0 — CSS-Only Components

Separator

Or continue with

Kbd

Ctrl K or ⌘ K

Spinner

Input (standalone) + Input Group

https://

Toggle / Toggle Group

Button Group

Native Select

Framework

7. Overlays and Interactive

Accordion

What makes DAUB different?

DAUB takes a considered approach to interface design. Every component honours materiality — tactile surfaces, warm shadows, and the subtle satisfaction of real-world interaction.

How many themes are available?

Eight themes ship with DAUB v2.0: Light, Dark, Grunge Light, Grunge Dark, Parchment, Ink, Ember, and Bone. Each one is a complete colour system.

Do I need a build step?

No. DAUB is two files — daub.css and daub.js. Link them from a CDN or serve them locally. No bundler, no framework dependency.

Collapsible

These are the advanced configuration options that are hidden by default. Use the collapsible component for progressive disclosure.

Dropdown Menu

Popover

Tooltip

Are you sure?

This action cannot be undone. This will permanently delete the selected item from your account.

This is a sheet panel that slides in from the right. Use it for detail views, settings, or supplementary content.

Name

Drawer

A mobile-friendly bottom drawer for actions, forms, or navigation.

8. Complex Components

Calendar

Mo Tu We Th Fr Sa Su

Input OTP

CSS Bar Chart

MonTueWedThuFriSatSun

Data Table

Component	Category	Tier
Accordion	Interactive	Tier 2
Calendar	Complex	Tier 3
Carousel	Complex	Tier 3
Command	Complex	Tier 3
Separator	CSS-only	Tier 1

Custom Select (Combobox)

Accordion

Button

Calendar

Card

Carousel

Command Palette (⌘K)

Navigation

Home ⌘H

Settings

Theme

Light Mode

Dark Mode

9. Prose Typography

The Art of Considered Design

Good interface design is invisible. It operates in the space between intention and action, guiding without commanding. The best components feel inevitable rather than clever.

Design is not just what it looks like and feels like. Design is how it works.

Principles

Honour materiality — surfaces should feel real
Respect the reader — typography should be comfortable
Minimize ceremony — components should require no configuration

Inline code looks like var theme = 'light' and links look like this considered anchor.

<link rel="stylesheet" href="https://daub.dev/daub.css">
<script src="https://daub.dev/daub.js"></script>