+ {/* Colors */}
+
+
+
+ {/* Typography */}
+
+
+
+ {/* Buttons */}
+
+
+
+ {/* Form Inputs */}
+
+
+
+ {/* Cards */}
+
+
+
+ {/* Badges */}
+
+
+
+ {/* Avatars */}
+
+
+
+ {/* Alerts */}
+
+
+
+ {/* Dropdown Menu */}
+
+
+
+
+
+
+ My Account
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Dialog */}
+
+
+
+
+ {/* Tabs */}
+
+
+
+ Account
+ Password
+
+
+
+
+
+
+
+
+ {/* Table */}
+
+
+
+
+
+ {/* Skeletons */}
+
+
+
+ {/* Separator */}
+
+
+
+
+
+
+
+
+ Background
+
+
+
+ Foreground
+
+
+
+ Card
+
+
+
+ Primary
+
+
+
+ Secondary
+
+
+
+ Muted
+
+
+
+ Accent
+
+
+
+ Destructive
+
+
+
+ Border
+
+
+
+
+ Heading 1
+text-4xl font-bold
+
+
+ Heading 2
+text-3xl font-semibold
+
+
+ Heading 3
+text-2xl font-semibold
+
+
+ Heading 4
+text-xl font-medium
+
+
+ Body text - The quick brown fox jumps over the lazy dog
+text-base
+
+
+ + Small text - The quick brown fox jumps over the lazy dog +
+text-sm text-muted-foreground
+
+
+
+ const example = true;
+
+ Code / Mono
+
+ {/* Variants */}
+
+
+
+
+ {/* Sizes */}
+ Variants
+
+
+
+
+
+
+
+
+
+
+
+ {/* With Icons */}
+ Sizes
+
+
+
+
+
+
+
+
+
+ {/* States */}
+ With Icons
+
+
+
+
+
+
+
+ States
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setChecked(value as boolean)} />
+
+
+
+
+
+
+
+ Simple Card
+ Basic card with title and description
+
+
+
+
+
+
+
+ Card with Footer
+ Card with action buttons
+
+
+
+
+
+
+
+
+
+ + This is the card content area. You can put any content here. +
++ Cards can have footers with actions. +
+
+ Default
+ Secondary
+ Outline
+ Destructive
+ Success
+ Warning
+
+
+
+ AB
+
+
+ CD
+
+
+ EF
+
+
+
+
+ Information
+
+ This is an informational alert message.
+
+
+
+
+ Error
+
+ Something went wrong. Please try again.
+
+
+
+
+ Success
+
+ Your changes have been saved successfully.
+
+
+
+
+ Warning
+
+ Please review your changes before proceeding.
+
+
+
+ + Make changes to your account here. Click save when you're done. +
+
+
+
+
+ + Change your password here. After saving, you'll be logged out. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Section 1
+Section 2
+