Components

Interface pieces are written in src/styles/components and thin React wrappers under src/components/ui. They follow Material ideas — elevation, ripple, floating labels, 8px rhythm — without a third-party kit.

Button

<Button href="/docs">Read the docs</Button>
<Button variant="outline">About</Button>
<Button variant="ghost">Sign in</Button>

Variants: filled, outline, ghost. Optional block for full width.

Card

.md-card is the surface. Add md-card--link when the whole card is a link. .md-card__icon is the circular mark. .md-card__list is the stacked link list used on the docs index.

Text field

.md-field pairs an input with a floating label. The label shrinks when the field is focused or filled (:not(:placeholder-shown)).

Chips and aside

Docs and blog asides use .docs-chip for tags and categories, and .docs-toc for on-page headings.

Live examples

Rendered controls (so you can click them) live on the examples page:

Material Design examples