Component Library
Black & White
A minimal, monochrome design system. Pure Tailwind v4 utility classes, zero dependencies. Inspired by shadcn/ui.
Typography
Display Heading
Heading One
Heading Two
Heading Three
Heading Four
Lead text -- used for introductory paragraphs that need extra visual weight and a slightly larger size to draw readers in.
Body text renders at the default size. Good typography creates hierarchy, guides the reader, and communicates information clearly without relying on decoration.
Small text for secondary information, captions, and metadata.
Muted text for less important details that should recede visually.
Use inline code for technical references within body text.
"Good design is as little design as possible. Less, but better -- because it concentrates on the essential aspects."
Buttons
Variants
Sizes
States
Inputs
Password must be at least 8 characters.
Badges
Variants
Sizes
Cards
Simple Card
A basic card with border, background, and minimal shadow. Nothing more than necessary.
Card Header
Card body content with header and footer dividers for clear visual separation.
Card Footer
Interactive Card
Hover to see the shadow transition. Use for clickable surfaces and navigation.
Total Revenue
$45,231
+20.1% from last month
Alerts
Heads up
You can add components to your app using the CLI.
Warning
This action may have unintended side effects. Proceed with caution.
Error
Something went wrong. Your session has expired.
Tables
| Invoice ▲ | Status | Amount ▼ |
|---|---|---|
| INV001 | Paid | $250.00 |
| INV002 | Pending | $150.00 |
| INV003 | Paid | $350.00 |
| INV004 | Overdue | $450.00 |
Navigation
Tabs
Breadcrumbs
Pagination
Form Controls
Checkboxes
Radio
Toggle
Form Group
This is your public display name. It can be your real name or a pseudonym.
Overlays
Notification Badge
Tooltip
Separators
Horizontal Rule
With Text
OR
Vertical
Lists
Unordered
- First item in the list
- Second item with more detail
- Third item completes the set
Ordered
- 1. Clone the repository
- 2. Install dependencies
- 3. Run the dev server
Description
- Name
- Black & White
- Version
- 1.0.0
- License
- MIT
Avatars
With Initials
With Status
Avatar Group
Code
Inline
Install with npm install and run npm run dev to start.
Block
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')