Components

Copyable UI patterns built for real projects.

Explore accessible, responsive components with working previews and portable HTML, CSS and React implementations.

Browse components Read the navbar guide

Production components

13 categories of patterns that meet the library’s implementation and accessibility standard.

13 production categories

Layout

Accessible, responsive navigation patterns with portable HTML, CSS and React implementations.

6 patterns · Browse →Heroes

Hero sections for landing pages, product pages and launches.

4 patterns · Browse →Features

Feature grids and benefit sections for product and marketing pages.

4 patterns · Browse →

Content

Card patterns for content, products, features and dashboards.

4 patterns · Browse →Testimonials

Testimonial and social-proof sections for product sites.

4 patterns · Browse →Lists

List groups for processes, benefits and structured content.

4 patterns · Browse →

Interaction

Form sections for signups, contact flows, filters and settings.

6 patterns · Browse →Accordions

Accordion and FAQ patterns for support and content-heavy layouts.

4 patterns · Browse →Buttons

Button patterns for actions, navigation and product interfaces.

4 patterns · Browse →

UI elements

Banner and call-to-action strips for announcements and promotions.

4 patterns · Browse →Badges

Badge and label patterns for status and metadata.

4 patterns · Browse →Avatars

Avatar patterns for profiles, teams and social proof.

4 patterns · Browse →Ratings

Rating patterns for reviews and score summaries.

4 patterns · Browse →

What production means

Real implementations

Every pattern includes code that matches its live preview.

Accessible foundations

Semantic structure, keyboard interaction and visible focus are part of publication.

Responsive by design

Examples can be checked at desktop, tablet and mobile widths.