A component library
with a point of view.
36 components for personal sites, portfolios, and developer docs. Monochrome by default, one warm accent, two themes. Drop in the package, change the brand color, and ship.
card.tsx
Engineering · 9 min
Designing a type-safe BFF
<Card href="/blog/designing-a-type-safe-bff">
<CardBody>
<Eyebrow>Engineering</Eyebrow>
<h3>Designing a type-safe BFF</h3>
</CardBody>
</Card>Built for
Personal portfolios
Editorial layout, long-form posts
Developer docs
Code blocks, callouts, TOC
Product sites
Hero, feature, and footer sections
Internal tools
Cards, tables, status chips
Components for editorial products.
Card
Linked, static, or button-backed content cards
SectionHead
Eyebrow, title, and lede block
Container
Max-width content wrapper
ActionRail
Compact action groups
Navbar
Responsive site header
Footer
Brand, links, subscribe, and meta rows
Rail
Vertical secondary navigation
Toc
Table of contents with active tracking
Button
Actions, links, icons, and loading state
Input
Text fields with prefix and suffix slots
Toggle
Accessible switch control
SegmentedControl
Single-select control groups
Opinionated defaults, practical escape hatches.
Two themes, one source of truth
Set data-theme="light" or data-theme="dark" on <html>. Components read the same tokens in both modes.
CSS tokens, not Tailwind config
Colors, fonts, radii, spacing, and motion live in theme.css. Swap the token layer to rebrand.
No icon set baked in
Bring lucide, react-icons, SVGs, or your own glyphs. Components expose slots instead of icon opinions.