Typography Scale

Heading 1 (5xl)

Heading 2 (4xl)

Heading 3 (3xl)

Heading 4 (2xl)

Heading 5 (xl)

Heading 6 (lg)

Body text (base) - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small text (xs) - Additional information

Button Variants & Colors

Solid Buttons

Outline Buttons

Soft Buttons

Ghost Buttons

Button Sizes

Disabled State

Alert Component

Alert Variants

Soft Alert Variants

Alert with Icons

Alerts without Titles

Complex Alert Content

Banner Component

Banner Variants

Click the buttons above to test banner positioning and dismissibility. The banners will appear at the top or bottom of the viewport with smooth animations.

Card Component

Card Variants

Default Card

This is a default card with standard styling.

Bordered Card

This card has a visible border around it.

Shadow Card

This card has a subtle shadow effect.

Elevated Card

This card has a more pronounced elevation.

Card Padding Options

Small Padding

Compact card with minimal spacing.

Medium Padding

Standard card with normal spacing.

Large Padding

Spacious card with generous spacing.

Complex Card Example

Product Dashboard

Analytics Overview

Live

1,234

Total Users

98.5%

Uptime

156

Active Sessions

Progress

TypingEffect Component

Different Sizes

Different Colors

Custom Speed Settings

Quotes Component

Default Quote Style

"This design system has completely transformed our development workflow. The components are intuitive, well-designed, and incredibly easy to implement."

Sarah Johnson
Lead Developer, TechCorp

Centered Quote with Avatar

"The Basis Stack provides the perfect balance of performance and developer experience. It's exactly what we needed for our modern web applications."

Michael Chen
CTO, Innovation Labs

Minimal Quote Style

"Clean, simple, effective. This is how design systems should be built."

Emma Rodriguez
UI/UX Designer

Small Quote

"Perfect for smaller testimonials and reviews."

Alex Kim
Product Manager, StartupXYZ

Form Components

Text Input & Textarea

Email Address *

We'll never share your email with anyone

Large Input

Small Input

Error State

This field is required

Message

Maximum 500 characters

Filled Textarea

Select Dropdown

Checkbox & Switch

Accept terms and conditions

You agree to our Terms of Service and Privacy Policy

Small checkbox

Large checkbox

This is a larger checkbox variant

Email notifications

Receive email updates about your account

Small switch

Large switch

Enable advanced features

Range Slider

Default Range Slider

0 100

Small Range Slider

0 10

Large Range Slider

0 500

Radio Group

Subscription Plan

Small Radio Group

Form States

Disabled Input

Readonly Input

Disabled checkbox

Disabled switch

Popover Component

SlideOver Component

SlideOver Directions & Sizes

Different Sizes

NavigationMenu Component

Basic Navigation Menu

Features: - Hover and click trigger options - Multi-level dropdown support - Configurable delay for hover interactions - Responsive mobile menu toggle - Mega menu support with grid layouts - Active state management - Smooth transitions and animations - Alpine.js powered interactivity - Accessible keyboard navigation - Customizable styling and positioning -->

Responsive Navigation Menu (Test on mobile)

Features: - Hover and click trigger options - Multi-level dropdown support - Configurable delay for hover interactions - Responsive mobile menu toggle - Mega menu support with grid layouts - Active state management - Smooth transitions and animations - Alpine.js powered interactivity - Accessible keyboard navigation - Customizable styling and positioning -->

MenuBar Component

Web Style MenuBar

Desktop Style MenuBar

Dropdown Component

RetroGrid Component

Animated RetroGrid (Default)

Retro Grid Background

Content overlay on animated grid

Static RetroGrid (No Animation)

Static Grid

No animation, different angle

TextAnimation Component

Animation Types

Fade:

Slide:

Scale:

Bounce:

Manual Control

CopyToClipboard Component

Button Variant

Icon Variant

Custom Styling

Pagination Component

Basic Pagination

Showing 21 to 30 of 89 results

Large Dataset Pagination

Showing 141 to 150 of 500 results

Simple Pagination (No Info)

Breadcrumbs Component

Chevron Separator

Slash Separator

Dot Separator (No Home)

Tabs Component

Underline Tabs

This is the overview content section. Here you can see general information about the product or service.

Feature list and detailed descriptions would go here. This tab contains all the important features.

Pricing information and plans would be displayed in this section.

Pills Tabs

User Profile

Personal information and settings.

Account Settings

Billing and subscription management.

Security Settings

Password and two-factor authentication.

Enclosed Tabs

function hello() {
  console.log('Hello World!');
}

Component documentation and usage examples would be displayed here.

Modal Component

Toast Component

Toast Variants

Toast Positions

Tooltip Component

Tooltip Positions

Tooltip with Delay

Tooltips on Different Elements

Accordion Component

Basic Accordion

FAQ Accordion

Badge Component

Badge Variants

New Active Error Warning Premium Draft

Info Success Danger Caution Featured Inactive

Beta Verified Urgent Pending Pro Archived

Online Available Busy Away Offline

Badge Sizes

Small Medium Large

Contextual Usage

John Doe Online

New Feature Beta

Task #123 High Priority

Progress Component

Basic Progress Bars

Progress

Animated & Striped Progress

Progress

Progress Sizes

Progress

Auto-Increment Progress

Progress

This progress bar automatically increments and includes a reset button.

Rating Component

Interactive Rating

Readonly Rating (Display Only)

Custom Star Count

Disabled State

Table Component

Basic Table

Name	Email	Role	Status
John Doe	john@example.com	Admin	Active
Jane Smith	jane@example.com	Editor	Active
Bob Johnson	bob@example.com	User	Inactive
Alice Brown	alice@example.com	Moderator	Active