Champagne Paper

Components

Components

39 production-ready UI components built on shadcn/ui, Tailwind CSS 4, and the Champagne Paper token system. Every component page includes a live preview, copyable code, all variants, all states, design token references, and accessibility notes.

Primary Outline

Buttons

6 variants

View →

Cards

3 variants

View →
.com .net .org

Badges

6 variants

View →
Email address

Forms

8 elements

View →
Dialog
Tooltip

Overlays

5 patterns

View →
13+
28

Data Display

6 patterns

View →
Xuperson

Navigation

4 patterns

View →

Feedback

4 patterns

View →

Hero Aurora

2 variants

View →

Bento Grid

1 variant

View →

Tech Stack

UI primitives use @base-ui/react, styled with Tailwind CSS v4 and the Champagne Paper token system. Blocks are copy-pastable React components installable via the @champagne-paper shadcn registry. React 19 islands via Astro client:load / client:visible directives.