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.
Fixed Header
A header that stays pinned to the top of the viewport as the user scrolls through content.
Static Header
A header that scrolls naturally with the page content, disappearing as the user scrolls down.
Reveal Header
The header hides on scroll down and reveals all rows when the user scrolls back up.
Sticky Tabs
A fixed header with a secondary tab bar that sticks below it using CSS variable syncing.
Footers
Footer components including tab bars and floating action buttons.
Layout
Layout components including sidebars, navigation, and responsive patterns.
Sidebar Menu
A slide-out drawer with backdrop overlay, keyboard dismiss, and smooth animations.
Scroll Navigation
Horizontal pill-style scrollable tabs for category filtering and section navigation.
In-Page Navigation
Anchor-based section navigation with scroll-spy highlighting and reveal-nav header behavior.
Desktop Nav
Horizontal navigation with dropdown menus that adapts from mobile hamburger to desktop layout.
Patterns
Common UI patterns combining multiple components together.