Buttons
A collection of button components using the theme colors.
Primary Buttons
Solid Primary Buttons
Primary Outline Buttons
Primary Link Buttons
Loading State Buttons
Secondary Buttons
Solid Secondary Buttons
Secondary Outline Buttons
Secondary Link Buttons
Tertiary Buttons
Solid Tertiary Buttons
Tertiary Outline Buttons
Tertiary Link Buttons
Typography
Typography examples and styles using the theme.
Headings
Heading 1 (text-4xl)
Heading 2 (text-3xl)
Heading 3 (text-2xl)
Heading 4 (text-xl)
Heading 5 (text-lg)
Heading 6 (text-base)
Body Text
This is regular body text (text-base). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is small text (text-sm). Used for captions, labels, and secondary information.
This is extra small text (text-xs). Used for fine print and disclaimers.
Text Colors
text-theme-primary - Main text color
text-theme-secondary - Secondary text color
text-theme-muted - Muted text color
text-primary-200 - Primary color text
text-secondary-200 - Secondary color text
text-tertiary-200 - Tertiary color text
Font Weights
font-thin - Thin weight (100)
font-light - Light weight (300)
font-normal - Normal weight (400)
font-medium - Medium weight (500)
font-semibold - Semi-bold weight (600)
font-bold - Bold weight (700)
font-extrabold - Extra bold weight (800)
Links
Default Link
Default link styleLink without Underline
Link without underlineLink with Hover Effect
Link with border hoverSecondary Color Link
Secondary linkBlockquotes
"This is a simple blockquote with a left border. It's perfect for highlighting important quotes or testimonials."
"This blockquote uses the secondary color scheme for variety."
"This blockquote has a background color for additional emphasis."
Code Blocks
Inline Code
Use inline code for short code snippets.
Code Block
function example() {
console.log('This is a code block');
return true;
}Code Block with Syntax Highlighting Style
const greeting = 'Hello World';
console.log(greeting);Text Alignment
Left Aligned (default)
This text is left-aligned. It's the default alignment for most text content.
Center Aligned
This text is center-aligned. Perfect for headings and call-to-action text.
Right Aligned
This text is right-aligned. Often used for dates, prices, or metadata.
Justified
This text is justified, meaning it stretches to fill the full width of the container with even spacing between words. It creates clean edges on both sides.
Form Elements
A comprehensive collection of all form elements and input types.
Text Inputs
This field has an error.
This field is valid.
Textarea
0 / 500 characters
Select / Dropdown
Hold Ctrl/Cmd to select multiple options
Checkbox
Primary Color
Different Shapes
Different Colors
States
Radio Buttons
Primary Color
Different Colors
States
Switch / Toggle
File Upload
Accepts images only
Range Slider
Date & Time Pickers
Custom, reusable date and time picker components. Supports both calendar selection and keyboard input.
Date only - no time selection
Time only - no date selection
Full date and time picker
Other Form Controls
60% complete
70% of maximum
Form Layouts
Complete Form Example
Inline Form Layout
Navigation
Navigation components for building user interfaces.
Breadcrumbs
Navigational breadcrumbs showing the current page hierarchy.
Default Breadcrumbs
Breadcrumbs with Icons
Pagination
Pagination controls for navigating through multiple pages of content.
Simple Pagination
Pagination with Ellipsis
Tabs
Tab navigation for organizing content into multiple panels.
Horizontal Tabs
Content for Tab 1
Content for Tab 2
Content for Tab 3
Dropdown Menus
Dropdown menus for displaying lists of options or actions.
Stepper / Steps
Step indicators for multi-step processes.
Horizontal Stepper
Vertical Stepper
Step 1: Information
Complete your basic information
Step 2: Verification
Verify your details
Step 3: Confirmation
Review and confirm
Layout
Layout components for structuring page content.
Cards
Card components for displaying content in containers.
Basic Card
Card Title
This is a basic card with a title and some content.
Card with Image
Card with Image
This card includes an image at the top.
Card with Actions
Card with Actions
This card includes action buttons in the footer.
Elevated Card
Elevated Card
This card has a larger shadow for more emphasis.
Grid Layouts
Responsive grid systems for organizing content.
2-Column Grid
Column 1
Column 2
3-Column Grid
Column 1
Column 2
Column 3
4-Column Grid
Column 1
Column 2
Column 3
Column 4
Containers
Container components for constraining content width.
Centered Container
This container is centered with a max-width of 4xl.
Full Width Container
This container spans the full width.
Constrained Container
This container has a constrained max-width for readability.
Dividers / Separators
Visual separators for dividing content sections.
Horizontal Divider
Content above
Content below
Divider with Text
Vertical Divider
Left Content
Right Content
Spacing Utilities
Spacing utilities for consistent layout spacing.
Padding Examples
Margin Examples
Content
Content display components for organizing and presenting information.
Lists
List components for displaying ordered and unordered content.
Unordered List
- First item
- Second item
- Third item
Ordered List
- First step
- Second step
- Third step
Description List
- Term 1
- Description for term 1
- Term 2
- Description for term 2
Nested List
- Parent item 1
- Child item 1.1
- Child item 1.2
- Parent item 2
Tables
Table components for displaying structured data.
Basic Table
| Name | Role | |
|---|---|---|
| John Doe | john@example.com | Admin |
| Jane Smith | jane@example.com | User |
Striped Table
| Product | Price | Stock |
|---|---|---|
| Item 1 | $29.99 | 50 |
| Item 2 | $39.99 | 30 |
| Item 3 | $19.99 | 100 |
Table with Actions
| Name | Status | Actions |
|---|---|---|
| Project Alpha | Active | |
| Project Beta | Pending |
Badges / Tags
Badge components for labels, tags, and status indicators.
Color Badges
Size Variants
Removable Badges
Avatars
Avatar components for user profile images and initials.
Size Variants
Avatars with Status
Avatar with Image Placeholder
Data Display
Components for displaying data, statistics, and visualizations.
Accordion / Collapsible
Expandable and collapsible content sections.
This is the content for accordion item 1. It can contain any HTML content.
This is the content for accordion item 2. You can have multiple accordion items.
This is the content for accordion item 3. Each item can be expanded or collapsed independently.
Stats / Metrics Cards
Metric cards for displaying key statistics and numbers.
Total Users
1,234
+12% from last month
Revenue
$45,678
+8% from last month
Orders
567
-3% from last month
Conversion
3.24%
+0.5% from last month
Charts
Chart.js graphs for data visualization.
Line Chart
Bar Chart
Pie Chart
Doughnut Chart
Area Chart
Empty States
Empty state components for when there's no data to display.
No items found
Get started by creating a new item.
No documents
You haven't created any documents yet.
Skeleton Loaders
Loading placeholders that mimic content structure.
Text Skeleton
Card Skeleton
Table Skeleton
Timeline
Timeline components for displaying chronological events.
Event 1
Description of the first event
2 hours ago
Event 2
Description of the second event
5 hours ago
Event 3
Description of the third event
1 day ago
Notifications / Toasts
Toast notifications that appear temporarily to provide feedback to users.
Modals / Dialogs
Modal dialogs for important actions and information.
Popovers
Contextual popovers that appear near trigger elements.
Tooltips
Small hints that appear on hover or focus.
Confirmation Dialogs
Promise-based confirmation dialogs for user actions.
Drawers / Side Panels
Slide-in panels from different directions.
Progress Indicators
Progress bars and loading indicators.