# Patterns Source: https://lumeo.nativ.sh/patterns # Patterns Live component variants built with Lumeo. All 145Accordion 3Alert 2AlertDialog 2AspectRatio 1Avatar 3BackToTop 1Badge 6Breadcrumb 2Button 6Calendar 2Card 3Cascader 1Charts 8Checkbox 2Collapsible 2ColorPicker 2Combobox 2Command 2ContextMenu 2DatePicker 1Descriptions 2Dialog 2Drawer 3DropdownMenu 2EmptyState 2FileUpload 2HoverCard 2Image 2Input 3Kbd 2Label 2NumberInput 2OtpInput 1Pagination 2Popover 2Progress 2RadioGroup 2Rating 3Result 2ScrollArea 1Segmented 2Select 2Separator 1Sheet 5Skeleton 2Slider 3Spinner 2Statistic 2Steps 2Switch 2Table 2Tabs 3TagInput 2Textarea 2Timeline 2Toast 6Toggle 2ToggleGroup 2Tooltip 2Transfer 1TreeView 2Watermark 2 ##### Accordion Is it accessible? Yes. It adheres to the WAI-ARIA design pattern. Is it styled? Yes. It comes with default styles that match your theme. Is it animated? Yes. It's animated by default using CSS transitions. Basic Accordion View code Section One Content for section one. Multiple sections can be open simultaneously. Section Two Content for section two. Multiple Open View code What is Lumeo? Lumeo is a Blazor component library inspired by shadcn/ui. How do I install it? Install via NuGet: `dotnet add package Lumeo` Compact FAQ View code ##### Alert Heads up! You can add components using the NuGet package. Default View code Error Your session has expired. Please sign in again. Destructive View code ##### AlertDialog Delete Account Confirm Delete View code Publish Changes Basic Confirmation View code ##### AspectRatio 16 / 9 16:9 Ratio View code ##### Avatar JD Default View code AB Small View code XY Large View code ##### BackToTop The BackToTop button appears in the bottom-right corner when you scroll down. Usage: add `` to your layout. BackToTop View code ##### Badge Badge Default View code Secondary Secondary View code Outline Outline View code Destructive Destructive View code Success Success View code Warning Warning View code ##### Breadcrumb 1. [Home](#) 3. [Components](#) 5. Breadcrumb Default View code 1. [](#) 3. [Docs](#) 5. Breadcrumb Custom Separator View code ##### Button Button Default View code Secondary Secondary View code Destructive Destructive View code Outline Outline View code Ghost Ghost View code Link Link View code Icon Only View code Please wait Loading State View code Left Center Right Button Group View code ##### Calendar June 2026 Su Mo Tu We Th Fr Sa 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 7 8 9 10 11 Basic Calendar View code June 2026 Su Mo Tu We Th Fr Sa 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 7 8 9 10 11 Selected: None Date Selection View code ##### Cascader Select location... Basic Cascader View code ##### Card Card Title Card description goes here. Your content lives here. Simple Card View code Create Account Fill in your details to get started. Name Email Cancel Create With Form View code Total Revenue $45,231 +20.1% from last month Stats Card View code ##### Charts #### Monthly Revenue Year-over-year revenue comparison across all twelve months. #### Traffic Overview Daily sessions, unique visitors, and page views over the past seven days. #### Revenue Breakdown Distribution of revenue across product lines and service categories. #### Performance Metrics Q4 actual performance against quarterly targets across six key dimensions. #### Growth Trend Monthly active user growth and paid subscriber count over twelve months. #### Sales Comparison Stacked monthly sales by product category to show contribution mix. #### Activity Scatter Session duration (minutes) vs engagement score across two user cohorts. #### Revenue Donut Breakdown of total ARR by subscription tier with total displayed in the center. ##### Checkbox Accept terms and conditions Default View code Enabled by default Checked View code ##### Collapsible Repositories lumeo blazicons tailwindcss-v4 Default View code Advanced Settings Enable analytics Dark mode Panel Style View code ##### ColorPicker #3b82f6 Basic ColorPicker View code #10b981 With Presets View code ##### Combobox Default View code Searchable View code ##### Command Suggestions Calendar Search Emoji Calculator Basic Command View code Suggestions Calendar Search Emoji Settings Profile Billing Preferences With Groups View code ##### ContextMenu Right click here Basic Context Menu View code Right click here With Groups View code ##### DatePicker Default View code Date of birth With Label View code ##### Descriptions ### User Info Name John Doe Email john@example.com Role Administrator Basic Descriptions View code ### Order Details Order ID #12345 Status Shipped Amount $99.00 Date Mar 10, 2026 Bordered View code ##### Dialog Open Dialog Basic Dialog View code Delete Account Confirmation Dialog View code ##### Drawer Open Drawer Basic Drawer View code Edit Profile Drawer With Form View code Settings Nested Content View code ##### DropdownMenu Open Menu Default View code With Icons View code ##### EmptyState ### No results Try adjusting your search or filter. Default View code ### No projects yet Create your first project to get started. New Project With Action View code ##### FileUpload Click to upload or drag and drop PNG, JPG up to 10MB Drop Zone View code Click to upload or drag and drop .CSV or .XLSX files Multiple Files View code ##### HoverCard @johndoe User Profile View code [Lumeo Documentation](#) Link Preview View code ##### Image ![Sample image](https://picsum.photos/seed/lumeo/300/200) Basic Image View code ![Previewable image](https://picsum.photos/seed/preview/300/200) With Preview View code ##### Input Default View code Email With Label View code Disabled View code ##### Kbd Enter Escape Tab Single Keys View code ⌘K CtrlShiftP Key Combinations View code ##### Label Email address Default View code Username \* This is your public display name. With Required Indicator View code ##### NumberInput Basic NumberInput View code Value: 10 Min/Max with Precision View code ##### OtpInput Enter the 6-digit code sent to your email Default OTP Input View code ##### Pagination - Previous - 1 - 2 - 3 - 4 - 5 - Next Default View code - Previous - 1 - 2 - More pages - 10 - Next With Ellipsis View code ##### Popover Open Popover Default View code Settings With Form View code ##### Progress Progress 60% Default View code Default — 40% Success — 75% Warning — 55% Destructive — 90% All Variants View code ##### RadioGroup Default Comfortable Compact Default View code Starter Pro Enterprise Card Style View code ##### Rating Basic Rating View code 3.5 / 5 Half Stars View code Read Only View code ##### Result ### Payment Successful Your order #12345 has been confirmed. Go to Dashboard View Order Success Result View code ### Submission Failed Please check your input and try again. Retry Error Result View code ##### ScrollArea Radix UI Tailwind CSS Blazor ASP.NET C# TypeScript React Vue Svelte Next.js Nuxt Remix Scrollable List View code ##### Segmented ListGridBoard Basic Segmented View code SmallMediumLarge Block (Full Width) View code ##### Select Select an option Basic Select View code Select an option With Groups View code ##### Separator Radix Primitives An open-source UI component library. Blog Docs Source Horizontal & Vertical View code ##### Sheet Open Sheet Default (Right) View code Open Left Sheet Left Side View code Contact Form With Form View code Open Top Sheet Top Side View code Open Bottom Sheet Bottom Side View code ##### Skeleton Card Skeleton View code Text Skeleton View code Full Card Skeleton View code ##### Slider Default View code Custom Steps View code Volume 40% 0% 100% With Labels View code ##### Spinner Default View code Sizes View code Loading... With Button View code ##### Statistic Active Users 1,234 Revenue 45,678.00 Basic Statistic View code Sales 12,345 +12.5% Refunds 234 \-3.2% With Trend View code ##### Steps Account Create your account 2 Profile Set up your profile 3 Complete All done! Basic Steps View code Details Payment 3 Review 4 Confirm Clickable Steps View code ##### Switch Airplane Mode Default View code Active Checked View code ##### Table Invoice Status Amount INV-001 Paid $250.00 INV-002 Pending $150.00 INV-003 Paid $350.00 INV-004 Draft $450.00 Basic Table View code Name Email Role Loading State View code ##### Tabs Account Password Manage your account settings here. Basic Tabs View code Overview Analytics Reports Overview content goes here. Three Tabs View code Profile Settings Display Name With Content View code ##### TagInput Blazor C# Basic TagInput View code React With Suggestions View code ##### Textarea Default View code 0 / 200 With Character Count View code ##### Timeline Order placed Your order has been placed successfully. 2 hours ago Processing Your order is being processed. 1 hour ago Shipped Your order has been shipped. 30 min ago Vertical Timeline View code Step 1 Create account Step 2 Verify email Step 3 Complete profile Horizontal Timeline View code ##### Toast Show Toast Default Toast View code Show Error Toast Destructive Toast View code Show Success Toast Success Toast View code Show Warning Toast Warning Toast View code Show Info Toast Info Toast View code Top Left Top Center Top Right Bottom Left Bottom Center Bottom Right Positions View code ##### Toggle Bold Italic Default View code With Icons View code ##### ToggleGroup Single Select View code Multiple Select View code ##### Tooltip Hover me Default View code Top Bottom Left Right Positions View code ##### Transfer Available 0 / 4 Item 1 Item 2 Item 3 Item 4 Selected 0 / 1 Item 5 Basic Transfer View code ##### TreeView Documents Images Basic TreeView View code Notifications With Checkboxes View code ##### Watermark Content with watermark overlay Basic Watermark View code Confidential document Custom Rotation View code