Button Component Showcase

Variants

Sizes

All Variants × All Sizes

Primary

Secondary

Ghost

States

Link Buttons

Accessibility

Card Component Showcase

Variants

Default Card

This is a default variant card with title and description.

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

Sample image for card

Card with Image

This card includes an image to demonstrate the image support.

Feature image

Feature with Image

Feature cards can also include images to make them more visually appealing.

Content image

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 card image

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.

Feature showcase

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...

ErrorMessage Component Showcase

Basic Error Message

Error Message with Retry Button

Error Message Sizes

Error Message Without Retry

Usage Examples

API Error

Network Error

Validation Error

Toast Component Showcase

Toast Variants

Toast Sizes

Toast Positions

Auto-Dismiss Options

Usage Examples

Success Notification

Error Notification

Info Notification