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.

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

Enabled by default

Checked

Collapsible

Repositories

lumeo

Default

Advanced Settings

Panel Style

ColorPicker

Basic ColorPicker

With Presets

Combobox

Default

Searchable

Command

Suggestions

Basic Command

Suggestions

Settings

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 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