Info
An informational message with header and body content.
Components
Forms
Form elements with validation states and various input types.
Text Inputs
This input is valid.
Please enter a valid email.
Select & Textarea
Checkboxes & Radios
Disabled & Readonly
Cards
Cards for displaying grouped content with optional headers and footers.
Basic Cards
Card Title
Card body content with some text to demonstrate the styling.
A simple card with just a body section. No header or footer.
Featured
This card has multiple footer actions.
Accent Cards
Primary
Use for highlighting key features or important information.
Info
Helpful tips and additional context for users.
Success
Confirm completed actions or positive outcomes.
Warning
Alert users to potential issues or important considerations.
Danger
Highlight errors, destructive actions, or critical alerts.
Notifications
Alert messages for user feedback.
A primary notification for general information.
An info notification with helpful details.
A success notification to confirm actions.
A warning notification for potential issues.
A danger notification for errors or critical alerts.
Tables
Data tables with striped rows and proper spacing.
Default Table
| Name | Role | Status | Actions |
|---|---|---|---|
| Jane Doe | Developer | Active | Edit |
| John Smith | Designer | Active | Edit |
| Alice Brown | Manager | Away | Edit |
| Bob Wilson | Analyst | Inactive | Edit |
Accent Header Table
| Product | Category | Price | Stock |
|---|---|---|---|
| Theme Pack Pro | Software | $49.00 | In Stock |
| Design System | Design | $29.00 | In Stock |
| Component Library | Software | $79.00 | Low Stock |
| Icon Set | Design | $19.00 | Out of Stock |
Tabs
Tab navigation for switching between content panels.
Sunset Beach
Mountain View
City Lights
Ocean Waves
Midnight Dreams Luna Eclipse
3:42 Electric Sunrise Neon Pulse
4:15 Ocean Breeze Coastal Vibes
3:28 City Rhythm Urban Beat
4:02 ► 12:34
Getting Started Tutorial ► 8:45
Advanced Techniques ► 15:20
Best Practices Guide Annual Report 2024.pdf
Project Proposal.docx
Budget Spreadsheet.xlsx
User Manual.pdf
Breadcrumb
Progress
Progress indicators for loading states and completion status.
Default Progress
Color Variants
Code
Inline code and code blocks with syntax highlighting.
Inline Code
Use the const keyword for constants and let for variables.
JavaScript
// Syntax highlighted JavaScript
function createTheme(name, mode) {
return {
name,
mode,
colors: loadColors(name),
};
}
const theme = createTheme('catppuccin-mocha', 'dark');CSS
/* Theme-aware styles */
.card {
background: var(--turbo-bg-surface);
border: 1px solid var(--turbo-border-default);
border-radius: 0.5rem;
}HTML
<button class="btn btn-primary">Click me</button>Typography
Headings, paragraphs, and text styling.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text Styles
Regular paragraph text with bold, italic, and inline code.
Secondary text for less important content.
This is a link that adapts to the theme's accent color.
Blockquote
This is a blockquote. It's styled with the theme's accent colors and can span multiple lines for longer quotations.
Lists
Unordered
- First item
- Second item
- Third item
Ordered
- First item
- Second item
- Third item