UI

A modern UI library for the site.

A modern component library for the site — foundations, tokens, and UI patterns.

Browse

Foundations

Colors

Semantic OKLCH tokens for light and dark modes.

--background

--foreground

--card

--primary

--secondary

--muted

--accent

--destructive

--border

--ring

Typography

Heading, sans, and mono typefaces of the system.

Bricolage Grotesque

Geist Sans — body text

Geist Mono — code

Radius

Corner radius scale (sm → xl).

sm

md

lg

xl

full

Components

Accordion

Collapsible panels with headings and content.

Alert

A callout for displaying important information.

Alert 01

Ready-made alert variant.

Badge

A small label for status, tags, or metadata.

Default
Secondary
Outline
Destructive

Button

A button or a component that looks like a button.

Card

A container for grouping related content.

Product card
Container for title, copy, and actions.

Confetti

Imperative confetti burst effect.

Empty

Empty state for missing data.

No results
Try adjusting your search.

Input

A styled native input field.

Item

Compound list row (media, title, actions).

Alexandre Fleurquin

Product Manager & Builder

Marquee

Infinite horizontal scroll.

ProductDesignBuildShip
ProductDesignBuildShip
ProductDesignBuildShip
ProductDesignBuildShip

Reveal

Scroll-triggered reveal animation.

Soft reveal

Section Shell

Section container with max-width and padding.

SectionShell

Select

Dropdown for choosing a predefined value.

Separator

A separator accessible to screen readers.

Above

Below

Spotlight

Card with pointer spotlight effect.

Hover me

SpotlightCard

Tabs

Toggle between related panels.

Manage your account details.