A chalk-textured component library with green-slate darks and warm-cream lights. Fresh UI for modern Next.js apps.
9
Components
30+
Examples
2
Themes
2
Density Presets
Live Preview
Every component is theme-aware, density-responsive, and accessible out of the box. Here's a taste of what's inside.
Component Library
Each component is meticulously crafted with variants, sizes, and accessibility in mind. Click any component to see its full documentation.
Why BlackBoard
BlackBoard is a design system that feels like writing on a chalkboard in a dimly lit study. Every decision is intentional.
Theme-Aware
Independent color palettes for light and dark mode. Each theme feels intentionally crafted, not just inverted.
Copy & Paste
Components live in your codebase. No node_modules black box. Full ownership, full control.
Density Presets
Slate (compact) or Canvas (spacious). One class toggles all component sizing globally.
Tailwind v4
CSS-first configuration with design tokens. No tailwind.config.js needed. Just @theme inline.
Radix Primitives
Accessible by default. Keyboard navigation, screen readers, and focus management built in.
Chalk Aesthetic
Warm amber glow, green-slate backgrounds, grain texture, and handcrafted attention to detail.
Design System
Green-slate neutrals are the signature. Warm amber accent. Five chalk colors for semantic meaning.
#0B1210
#17231D
#1F2E27
#2B3C33
#3E5248
#F0C554
#EBE6DB
#7BA4F7
#5ED4BA
#ED6B7E
#EF9E5E
#B294F2
Display
Patrick Hand
Chalk handwriting for headlines and display text.
Body
DM Sans
Clean geometric sans-serif for body text and UI.
Code
JetBrains
Monospace for code blocks, CLIs, and technical content.
Read the docs, browse the component library, and copy what you need. No install, no lock-in. Just beautiful components.