Examples

Explore our collection of ready-to-use examples and patterns. Each example includes live preview and source code.

Headers

Header components with various behaviors like fixed, reveal, and sticky.

A header that stays pinned to the top of the viewport as the user scrolls through content.

A header that scrolls naturally with the page content, disappearing as the user scrolls down.

The header hides on scroll down and reveals all rows when the user scrolls back up.

A fixed header with a secondary tab bar that sticks below it using CSS variable syncing.

Footer components including tab bars and floating action buttons.

A standard mobile bottom navigation with 5 items, badges, and auto-hide on scroll.

An elevated floating action button for primary actions like cart, compose, or create.

Layout components including sidebars, navigation, and responsive patterns.

A slide-out drawer with backdrop overlay, keyboard dismiss, and smooth animations.

Horizontal pill-style scrollable tabs for category filtering and section navigation.

Anchor-based section navigation with scroll-spy highlighting and reveal-nav header behavior.

Horizontal navigation with dropdown menus that adapts from mobile hamburger to desktop layout.

Common UI patterns combining multiple components together.

The most complex pattern: header reveals on scroll up while footer auto-hides on scroll down.

Live theme switching using CSS custom properties and the shadcn token system.