Default Card
This is a default variant card with title and description.
Button Component Showcase
Variants
Sizes
All Variants × All Sizes
States
Link Buttons
Accessibility
Card Component Showcase
Variants
Feature Card
This is a feature variant card, perfect for showcasing features.
Content Card
This is a content variant card, optimized for content feeds.
Cards with Images
Card with Image
This card includes an image to demonstrate the image support.
Feature with Image
Feature cards can also include images to make them more visually appealing.
Content with Image
Content cards work great with images for displaying articles or posts.
Cards with Footer
Card with Footer
This card includes a footer section with action buttons.
Feature with Footer
Feature cards can have footers with multiple action options.
Content with Footer
Content cards often have footers with metadata or actions.
Cards with Custom Children
Custom Content Card
This card uses custom children instead of title and description props.
- Flexible content structure
- Full control over layout
- Perfect for complex content
Feature with Custom Content
You can combine custom children with other props for maximum flexibility.
Pro tip: Use children for complex layouts!
Complete Cards (All Features)
Complete Default Card
This card demonstrates all features: image, content, and footer.
This card also includes custom children content in addition to the title and description.
Complete Feature Card
Feature cards can showcase all capabilities together.
Tag Component Showcase
Variants
Default TagPrimary TagSecondary Tag
Sizes
Small TagMedium Tag
All Variants × All Sizes
Default
SmallMedium
Primary
SmallMedium
Secondary
SmallMedium
Usage Examples
Categories
ReactTypeScriptNext.jsSCSS
Technologies
FrontendBackendFull StackDevOps
Skills
Responsive DesignAccessibilityPerformance
Badge Component Showcase
Status Variants
LiveUpcomingDraft
All Status Types
LiveUpcomingDraft
Usage Examples
Content Status
LivePublishedActive
Upcoming Content
UpcomingScheduledComing Soon
Draft Content
DraftIn ReviewPending
Mixed Statuses
LiveUpcomingDraftPublished
Input Component Showcase
Input Types
Required Inputs
Error States
This field is required
Please enter a valid email address
All States Combined
This field has an error
This required field has an error
Select Component Showcase
Basic Select
Required Select
Error States
Please select an option
This field is required
Usage Examples
Toggle Component Showcase
Basic Toggle
Toggle States
Usage Examples
Loader Component Showcase
Basic Loader
Loading...
Please wait
Loader Sizes
Small loader
Medium loader
Large loader
Loader Without Text
Usage Examples
Loading Content
Loading content...
Processing Request
Processing your request
Fetching Data
Fetching data...