Component library
Patterns, inputs, surfaces, and feedback
A cleaner gallery for reviewing component variants, states, and interaction patterns using the component library itself as the presentation layer.
Accordion
Expandable content with single-open behavior.
Default Neumorphism
This is the first panel.
This is the second panel.
Material Multiple Open
This is the first panel.
This is the second panel.
Glassmorphism
This is the first panel.
This is the second panel.
Controlled + onChange callback
Breadcrumbs
Hierarchical navigation.
Items prop
Slot
Badge
Status and counts.
Soft
Solid
Outline + Dot
Glass
Popover
Anchored contextual panel.
Material · Bottom
Neumorphism · Top
Glassmorphism · Bottom
Banner
Temporary messaging patterns with actions.
Neumorphism Banner
Glass Banner
Material Banner
Button
Core action component across visual variants and states.
Neumorphism
Glassmorphism
Material
Outlined
Text
Disabled
Calendar
Range selection across surface variants.
Neumorphism · Disabled Sunday
Glassmorphism
Material
Outlined
Card
Surface variants and composed card anatomy.
Material · Full anatomy
Card title
Uses `PrimaryAction`, `Media`, and `Content` together (`16:9`, `cover`).
Neumorphism · Media overlay + action icons
Overlay content
Shows `MediaContent` with square ratio and `cover` fit.
Neumorphism content body with icon actions below.
Glassmorphism · Clickable primary area
Primary action zone
Entire top area acts as the primary interactive target.
Outlined card surface
Outlined shell
Pairs outlined card container with regular content.
Carousel
Media-rich content presentation.
Material · Controlled index
Third Slide
This is the content of the third slide.
First Slide
This is the content of the first slide.
Second Slide
This is the content of the second slide.
Third Slide
This is the content of the third slide.
First Slide
This is the content of the first slide.
Slide 1 of 3
Neumorphism · 16:9
Third Slide
This is the content of the third slide.
First Slide
This is the content of the first slide.
Second Slide
This is the content of the second slide.
Third Slide
This is the content of the third slide.
First Slide
This is the content of the first slide.
Slide 1 of 3
Glassmorphism
Third Slide
This is the content of the third slide.
First Slide
This is the content of the first slide.
Second Slide
This is the content of the second slide.
Third Slide
This is the content of the third slide.
First Slide
This is the content of the first slide.
Slide 1 of 3
Outlined
First Slide
This is the content of the first slide.
Second Slide
This is the content of the second slide.
Third Slide
This is the content of the third slide.
Slide 1 of 3
Text
First Slide
This is the content of the first slide.
Second Slide
This is the content of the second slide.
Third Slide
This is the content of the third slide.
Slide 1 of 3
Checkbox
Selection states across variants.
Neumorphism
Outlined
Filled
Disabled
Color Selector
Color selection across variants.
Material
Neumorphism
Glassmorphism
Date Picker
Single-date selection.
Material
Neumorphism
Glassmorphism
Dialog
Modal interaction patterns.
Neumorphism Dialog
Material Dialog
Glassmorphism Dialog
Dropdown
Option selection with helper and error states.
Controlled value + open state
Selection is bindable.
Neumorphism
I am not required.
Neumorphism · Required
I am required.
This field is required.
Material
I am not required.
Material · Required
I am required.
This field is required.
Nested inside clipped containers
Overflow hidden + rounded shell
The card clips its children, but the opened menu should still escape.
Open the menu to confirm it escapes the clipped card instead of being cut off.
File Dropper
Drop targets across visual variants.
Neumorphism
Drag and drop your image files here or .
Material + bindable file state
Drag and drop your image files here or .
Material Icons
Icon sizes and visual rhythm.
Filled · Small
Outlined · Medium
Round · Large
Sharp · Medium
Two-tone · Medium
Filled · Medium
Icon Button
Material 3, neumorphism, glassmorphism, color states, elevation, and social icons.
Material · Flat
Material · Raised 1
Material · Raised 5
Outlined · Warning
Text · Error
Neumorphism · Success
Glassmorphism · Search
Social · GitHub
Social · YouTube
Disabled
Input
Text entry across variants.
Standard
Outlined
Disabled
Text Area
FormField
Links labels to controls for easier form interaction.
Input + Assistive text
Used for account notifications.
Checkbox label click
Layout Grid
Responsive cell-based layout primitive.
Grid Example
Lightbox
Fullscreen image viewer.
Basic
Pagination
Page navigation with ellipsis.
Material
Neumorphism
Glassmorphism
Loader
Progress and busy states.
Spinner
Menu
Simple navigation list across variants.
Material
Neumorphism
Glassmorphism
Surface
Primitive surface container variants.
Material
Material surface container
Neumorphism
Neumorphism surface container
Glassmorphism
Glassmorphism surface container
Outlined
Outlined surface container
Paper
Section and surface primitives.
Neumorphism
Glassmorphism
Material
Outlined
Radio
Single-choice selection groups.
Neumorphism
Material
Slider
Continuous value controls.
Neumorphism
Material
Range mode
Switch
Binary state controls.
Neumorphism
Material
Glassmorphism
Tabs
Sectioned content with keyboard nav.
Material + onChange callback
Neumorphism
Glassmorphism
Tag
Tag editing and tokenized input.
Neumorphic Tags
Material Tags
Glassmorphism Tags
Time Picker
Time selection input.
Material
Neumorphism
Glassmorphism
Tooltip
Contextual help and hints.
Top
Bottom
Left
Right
Toast
Transient messages.