Component Showcase

Test all components and their variants with the Soft Black & Silver theme

Buttons

Variants

All button variants and sizes

Variants

Sizes

Rounded

Silver Gradient

Cards

Card Title

Card description text

Card content goes here. This uses the card background color.

With Border

Card with visible border

This card demonstrates the border color from the theme.

Surface Background

Using surface color

This card uses the surface background color.

Badges

Default

Secondary

Destructive

Outline

Alerts

Info

This is an informational alert message.

Default

This is a default alert message.

Error

This is a destructive alert message.

Form Elements

Inputs & Controls

All form input components and their states

Default Input

Disabled Input

Textarea

Select

Accept terms and conditions

Enable notifications

Radio Group

Option 1

Option 2

Option 3

Slider

Value: 50

Progress45%

Tabs

Tab 1 Content

This is the content for tab 1.

Avatars

CNJDLG

Skeleton

Separator

Content above

Content below

Color Variables

Theme Colors

Visual representation of all CSS color variables

background

#FAFAFA#0D0D0D

foreground

#0D0D0D#F5F5F5

card

#FFFFFF#1A1A1A

primary

#6B6B6B#C0C0C0

secondary

#F5F5F5#1A1A1A

muted

#F5F5F5#1A1A1A

accent

#E6E6E6#E0E0E0

destructive

Red

border

#E5E5E5#2C2C2C

surface

#FFFFFF#1A1A1A

silver gradient

#6B6B6B → #A0A0A0#B0B0B0 → #E0E0E0

muted-foreground

#737373#A0A0A0