Re-usable layout components and patterns
A wrapper component for constraining content width.
A responsive grid system using CSS Grid.
A semantic sectioning element with consistent spacing.
Beautifully designed components built with Tailwind CSS
Clickable elements for actions and navigation
Input components and form elements
Contained content components
Modal and dialog components
Components for displaying data
This is an example alert component with multiple variants.
Successfully saved!
Your changes have been saved successfully.
Styles for headings, paragraphs, lists and more.
Default paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Small paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Large paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text can be bold, italic, or underlined.
You can also have inline code
and links.
"The best way to predict the future is to invent it."
- Alan Kay
// Example code block
function example() {
return {
title: "Hello World",
description: "This is a code block example"
};
}
Collection of form components and input elements.
We'll never share your email with anyone else.
Components for displaying data and information.
| Name | Title | Status | Actions |
|---|---|---|---|
| John Doe | Software Engineer | Active | |
| Jane Smith | Product Designer | Pending |
A simple card with basic content and styling.
Card content with a separated header section.
A card with hover effects and interactions.
Components that appear above the main content.
Modal content goes here. This is a basic modal example.
Are you sure you want to delete this item? This action cannot be undone.
This is a popover with some helpful information.
Drawer content goes here. This can be used for additional details or forms.
Components for user feedback and notifications.
Your changes have been saved successfully.
Please review your information before continuing.
An error occurred while processing your request.
This is an informational message for your attention.
Success Toast
Action completed successfully.
Error Toast
An error occurred. Please try again.
Toggle between light and dark modes with different variants.