Components
Reusable, accessible components for building consistent interfaces quickly.
Badge
A small, inline label that displays status, counts, or categorical information
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
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.
CodeCode
An inline text component that styles short code snippets with a monospaced font for clear readability.
Container
A wrapper that constrains content width and applies consistent padding.
CopyCode
A single line of code, like an install command, with a button that copies it to the clipboard.
Divider
A lightweight horizontal line that visually separates content.
Fieldset
A grouping component that organizes related form elements with a shared label.
Flex
A utility component that provides flexible layout control using CSS Flexbox properties.
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 a sidebar navigation that becomes a slide-in menu on smaller screens.
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.
| Property | Type |
|---|---|
size | s | m | l |
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.
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.