Component Display Case

Use this grid to rapidly place components and review their default rendering, spacing, and contrast. Replace the placeholders with imports and component instances.

Text

The quick brown fox jumps over the lazy dog.

Heading Example

Button

Badge

Default

Success

List

First item
Second item
Third item

Card

Example Card

In Progress

Cards compose content with header, body, and actions.

Alert

Heads up

This is a warning-level alert example.

Input

Avatar

Progress

75%

Spinner

Divider

Content above

Content below

Left

Right

Blockquote

"The best way to predict the future is to create it."

Switch

Enable notifications

Dark mode

Disabled switch

Field (composer)

Email address

We’ll never share your email.

Country

I agree to the Terms

Select

Tabs

Tab content goes here

Tooltip

Toast

Toast notification example

Success toast

Skeleton

Details

Click to expand

This is the collapsible content that appears when you click the summary.

Another details section

This one is open by default.

Image