A comprehensive showcase of all UI components used throughout the Leiser's Wine & Liquors discovery experience. Click around to see interactive states.
Top navigation bar with category tabs and action buttons.
SearchNav - Full Navigation
Contextual search with category-aware styling and placeholders.
Large Size (Hero)
Default Size
Card components for displaying products in grids and lists.
Promotional banners for events, sales, and featured collections.
Wine Variant
Saturday, April 15th at 6:00 PM
Join us for an exclusive evening of fine wines from the Burgundy region. Meet the winemakers and discover rare vintages.
Reserve Your SpotWhiskey Variant
Friday, April 21st at 7:00 PM
Explore the world of single malt with our resident whisky expert. Sample rare expressions from Speyside, Islay, and beyond.
Join the ClassSake Variant
Wednesday, April 26th at 6:30 PM
Experience the art of sake pairing with our sommelier and guest sushi chef from Tokyo.
Book NowDark Variant (Default)
Find the perfect bottle for everyone on your list. Curated selections for every budget and taste.
Shop GiftsLight Variant
Fresh shipments just landed. Be the first to discover our latest finds from around the world.
Explore NewCustom icons for bottle sizes, awards, and flavor tags.
Bottle Size Icons
Award Medals
Taste/Flavor Tag Icons
Interactive filter controls for search refinement.
Quick Toggles
Range Slider (Price)
Filter Tokens (Dropdowns)
Status indicators and quality tier badges.
Quality Tier Badges
Status Badges
Button styles used across the application.
Primary Buttons
Secondary / Ghost Buttons
Category Chiclets
Text styles and hierarchy.
Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Small text - Supporting description or metadata
Extra small - Labels, captions, and fine print
$69.99 $89.99
Primary colors used throughout the design system.
Neutrals
Category Colors
Semantic Colors
Leiser's Wine & Liquors Component Library
Built with Next.js, React, and Tailwind CSS