Patterns

Live component variants built with Lumeo.

Accordion

Basic Accordion

Multiple Open

Compact FAQ

Alert

Heads up!

You can add components using the NuGet package.

Default

Error

Your session has expired. Please sign in again.

Destructive

AlertDialog

Confirm Delete

Basic Confirmation

AspectRatio

16 / 9

16:9 Ratio

Avatar

Default

Small

Large

BackToTop

The BackToTop button appears in the bottom-right corner when you scroll down.

Usage: add <BackToTop /> to your layout.

BackToTop

Badge

Default

Secondary

Outline

Destructive

Success

Warning

Breadcrumb

Default

Custom Separator

Button

Default

Secondary

Destructive

Outline

Ghost

Link

Icon Only

Loading State

Button Group

Calendar

Basic Calendar

Selected: None

Date Selection

Cascader

Basic Cascader

Card

Card Title

Card description goes here.

Your content lives here.

Simple Card

Create Account

Fill in your details to get started.

Name

With Form

Total Revenue

$45,231

+20.1% from last month

Stats Card

Charts

Monthly Revenue

Year-over-year revenue comparison across all twelve months.

Bar chart with 2 series (This Year, Last Year) across 12 categories.
Category	This Year	Last Year
Jan	41200	35000
Feb	38400	31200
Mar	52100	44800
Apr	61800	53100
May	57300	48900
Jun	74200	62400
Jul	68900	58700
Aug	72500	61200
Sep	81300	69800
Oct	88700	74300
Nov	79400	65100
Dec	95600	82200

Traffic Overview

Daily sessions, unique visitors, and page views over the past seven days.

Line chart with 3 series (Sessions, Unique Visitors, Page Views) across 7 categories.
Category	Sessions	Unique Visitors	Page Views
Mon	12400	8900	38200
Tue	14800	10600	45100
Wed	13200	9700	40800
Thu	17600	12400	53700
Fri	19800	14200	61400
Sat	15300	10800	46200
Sun	11200	7900	33800

Revenue Breakdown

Distribution of revenue across product lines and service categories.

Pie chart with 5 data points.
Name	Value
SaaS Products	48
Professional Svcs	23
Subscriptions	17
Consulting	8
Other	4

Performance Metrics

Q4 actual performance against quarterly targets across six key dimensions.

Radar chart with 2 data points.
Name	Value
Actual	74, 68, 83, 52, 91, 76
Target	80, 75, 80, 65, 90, 80

Growth Trend

Monthly active user growth and paid subscriber count over twelve months.

Line chart with 2 series (Monthly Active Users, Paid Subscribers) across 12 categories.
Category	Monthly Active Users	Paid Subscribers
Jan	18200	3400
Feb	21400	4100
Mar	24100	4800
Apr	27800	5600
May	32500	6900
Jun	38700	8400
Jul	44200	9700
Aug	51600	11300
Sep	58900	13100
Oct	64300	14800
Nov	71800	16900
Dec	82400	19600

Sales Comparison

Stacked monthly sales by product category to show contribution mix.

Bar chart with 4 series (Hardware, Software, Services, Support) across 6 categories.
Category	Hardware	Software	Services	Support
Jan	12400	18600	8200	3100
Feb	10800	21200	9400	3600
Mar	14200	19400	10100	3800
Apr	16100	24800	11600	4200
May	13700	27300	12800	4700
Jun	18400	31200	14700	5100

Activity Scatter

Session duration (minutes) vs engagement score across two user cohorts.

Scatter chart with 2 series (Power Users, Casual Users) and 16 data points.
Series	Item	Value
Power Users	1	24, 94
Power Users	2	31, 87
Power Users	3	18, 91
Power Users	4	42, 83
Power Users	5	28, 96
Power Users	6	36, 89
Power Users	7	21, 88
Power Users	8	45, 79
Casual Users	1	8, 54
Casual Users	2	12, 61
Casual Users	3	6, 47
Casual Users	4	15, 58
Casual Users	5	9, 52
Casual Users	6	11, 63
Casual Users	7	7, 49
Casual Users	8	14, 57

Revenue Donut

Breakdown of total ARR by subscription tier with total displayed in the center.

Pie chart with 4 data points.
Name	Value
Enterprise	1180000
Pro	720000
Starter	340000
Free	160000

Checkbox

Accept terms and conditions

Default

Enabled by default

Checked

Collapsible

Repositories

lumeo

Default

Advanced Settings

Panel Style

ColorPicker

Basic ColorPicker

With Presets

Combobox

Default

Searchable

Command

Basic Command

With Groups

ContextMenu

Right click here

Basic Context Menu

Right click here

With Groups

DatePicker

Default

Date of birth

With Label

Descriptions

User Info

Name: John Doe
Email: [email protected]
Role: Administrator

Basic Descriptions

Order Details

Order ID: #12345
Status: Shipped
Amount: $99.00
Date: Mar 10, 2026

Bordered

Dialog

Basic Dialog

Confirmation Dialog

Drawer

Basic Drawer

Drawer With Form

Nested Content

DropdownMenu

Default

With Icons

EmptyState

No results

Try adjusting your search or filter.

Default

No projects yet

Create your first project to get started.

With Action

FileUpload

Click to upload or drag and drop

PNG, JPG up to 10MB

Drop Zone

Click to upload or drag and drop

.CSV or .XLSX files

Multiple Files

HoverCard

User Profile

Link Preview

Image

Basic Image

With Preview

Input

Default

With Label

Disabled

Kbd

Enter Escape Tab

Single Keys

⌘K

CtrlShiftP

Key Combinations

Label

Email address

Default

Username *

This is your public display name.

With Required Indicator

NumberInput

Basic NumberInput

Value: 10

Min/Max with Precision

OtpInput

Enter the 6-digit code sent to your email

Default OTP Input

Pagination

Default

With Ellipsis

Popover

Default

With Form

Progress

Progress 60%

Default

Default — 40%

Success — 75%

Warning — 55%

Destructive — 90%

All Variants

RadioGroup

Default

Comfortable

Compact

Default

Starter Pro Enterprise

Card Style

Rating

Basic Rating

3.5 / 5

Half Stars

Read Only

Result

Payment Successful

Your order #12345 has been confirmed.

Success Result

Submission Failed

Please check your input and try again.

Error Result

ScrollArea

Radix UI

Tailwind CSS

Blazor

ASP.NET

TypeScript

React

Vue

Svelte

Next.js

Nuxt

Remix

Scrollable List

Segmented

Basic Segmented

Block (Full Width)

Select

Basic Select

With Groups

Separator

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

Horizontal & Vertical

Sheet

Default (Right)

Left Side

With Form

Top Side

Bottom Side

Skeleton

Card Skeleton

Text Skeleton

Full Card Skeleton

Slider

Default

Custom Steps

Volume 40%

0% 100%

With Labels

Spinner

Default

Sizes

With Button

Statistic

Active Users

1,234

Revenue

45,678.00

Basic Statistic

Sales

12,345

+12.5%

Refunds

234

-3.2%

With Trend

Steps

Account

Create your account

Profile

Set up your profile

Complete

All done!

Basic Steps

Details

Payment

Review

Confirm

Clickable Steps

Switch

Airplane Mode

Default

Active

Checked

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

Name	Email	Role

Loading State

Tabs

Manage your account settings here.

Basic Tabs

Overview content goes here.

Three Tabs

Display Name

With Content

TagInput

BlazorC#

Basic TagInput

React

With Suggestions

Textarea

Default

0 / 200

With Character Count

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

Step 1

Create account

Step 2

Verify email

Step 3

Complete profile

Horizontal Timeline

Toast

Default Toast

Destructive Toast

Success Toast

Warning Toast

Info Toast

Positions

Toggle

Default

With Icons

ToggleGroup

Single Select

Multiple Select

Tooltip

Default

Positions

Transfer

Available 0 / 4

Item 1

Item 2

Item 3

Item 4

Selected 0 / 1

Item 5

Basic Transfer

TreeView

Documents

Images

Basic TreeView

Notifications

With Checkboxes

Watermark

Content with watermark overlay

Basic Watermark

Confidential document

Custom Rotation

Patterns

Accordion

Alert

AlertDialog

AspectRatio

Avatar

BackToTop

Badge

Breadcrumb

Button

Calendar

Cascader

Card

Charts

Monthly Revenue

Traffic Overview

Revenue Breakdown

Performance Metrics

Growth Trend

Sales Comparison

Activity Scatter

Revenue Donut

Checkbox

Collapsible

ColorPicker

Combobox

Command

ContextMenu

DatePicker

Descriptions

User Info

Order Details

Dialog

Drawer

DropdownMenu

EmptyState

No results

No projects yet

FileUpload

HoverCard

Image

Input

Kbd

Label

NumberInput

OtpInput

Pagination

Popover

Progress

RadioGroup

Rating

Result

Payment Successful

Submission Failed

ScrollArea

Segmented

Select

Separator

Sheet

Skeleton

Slider

Spinner

Statistic

Steps

Switch

Table

Tabs

TagInput

Textarea

Timeline

Toast

Toggle

ToggleGroup

Tooltip

Transfer

TreeView

Watermark

Cookies & consent