Component Library

70+ production-ready UI components from shadcn/ui. Interactive examples with all variants and states.

70+ ComponentsAccessibleCustomizable

Buttons

Primary actions, secondary actions, and specialized variants

Primary Variants

Sizes

States

Factor Variants (7-Factor Coherence Model)

Semantic Variants

Form Inputs

Text inputs, checkboxes, switches, sliders, and more

Text Input

Default

Disabled

With Error

This field is required

SliderValue: 50

Cards

Container components with headers, content, and footers

Card Title

Card description goes here

This is the card content. You can put any content here including text, images, or other components.

Outline Variant

With border styling

Cards support multiple variants including outline, v3-subtle, v3-medium, and more.

V3 Subtle

Glass morphism effect

V3 variants use glass morphism for depth without heavy shadows.

Feedback Components

Alerts, badges, progress indicators, and spinners

Alerts

Informational

This is a default informational alert message.

Success

Your changes have been saved successfully.

Warning

Please review your settings before continuing.

Error

Something went wrong. Please try again.

Badges

DefaultSecondaryOutlineSuccessWarningDestructive

Progress Indicator60%

Loading Spinners

Small

Default

Large

Data Display

Avatars, separators, and data visualization components

Avatars

JDABXY

Tooltips

Separator

Content above separator

Content below separator

70+ Components Available

This showcase covers the most commonly used components. Additional components include: Dialog, Sheet, Dropdown Menu, Context Menu, Popover, Command Palette, Calendar, Date Picker, Select, Radio Group, Toast notifications, Menubar, Accordion, Collapsible, Hover Card, Toggle, Toggle Group, Breadcrumb, Pagination, Scroll Area, Resizable panels, and many more.

Components from @/components/ui/ • Built with shadcn/ui