Components

Reusable, accessible components for building consistent interfaces quickly.

Badge

Badge

A small, inline label that displays status, counts, or categorical information

Banner

Banner

A prominent full-width strip that displays important messages, alerts, or announcements with optional actions.

Button

An interactive element that triggers actions or submits forms when clicked.

Card

Card

A contained surface that groups related content and actions in a visually distinct block.

Checkbox

A control that allows users to select one or more options from a set.

Code

Code

An inline text component that styles short code snippets with a monospaced font for clear readability.

Container

Container

A wrapper that constrains content width and applies consistent padding.

Divider

A lightweight horizontal line that visually separates content.

Fieldset

Fieldset

A grouping component that organizes related form elements with a shared label.

Icon

A scalable vector component for displaying symbolic icons with customizable size, color, and accessibility features.

Input

A field that captures single-line text or data input from the user.

Layout

A structural component that defines the overall page structure with header and side navigation areas.

Link

An interactive text element that navigates to another page or resource.

Navigation

A component for creating lists of navigational items to be used within the layout's sidebar.

Radio

A control that allows users to select exactly one option from a set.

Select

A dropdown menu that lets users choose one option from a list of choices.

PropertyType
directionrow | column

Table

A structured component for displaying tabular data in rows and columns with consistent styling and layout.

Tabs

A navigation component that organizes content into separate panels, allowing users to switch between views with clickable tab labels.

Lorem ipsum

Text

A typographic component for styling and displaying text with consistent typography scales.

Textarea

A multi-line text field that allows users to enter longer-form input or comments.

Copied to clipboard

Toast

A temporary, non-intrusive notification that appears in the bottom-right corner to provide feedback.

Toggle

A switch control that allows users to turn an option on or off.