Installation

Get started with Sparky UI in your project with these simple steps.

1. Install via NPM

npm install spark-ui

2. Add to Tailwind Config

// tailwind.config.js
module.exports = {
  plugins: [
    require('spark-ui')
  ]
}

3. Import CSS

/* In your CSS file */
@tailwind base;
@tailwind components;
@tailwind utilities;

Quick Start

Start using Sparky UI components right away with these examples.

Basic Usage

<button class="btn btn-primary">Get Started</button>
<button class="btn btn-ghost">Learn More</button>

Theming

Sparky UI supports automatic dark/light mode switching and custom themes.

Dark Mode Toggle

<!-- Light theme (default) -->
<html></html>

<!-- Dark theme -->
<html data-theme="dark"></html>

Buttons

Interactive button components with hover effects, multiple variants, and sizes.

Button Variants

<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>

Button Styles

<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-outline">Outline</button>
<button class="btn" disabled>Disabled</button>

Button Sizes

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-xl">Extra Large</button>

Button Groups

<div class="btn-group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Center</button>
  <button class="btn btn-primary">Right</button>
</div>

Icon Buttons

<button class="btn btn-icon">📱</button>
<button class="btn btn-icon btn-primary">💌</button>
<button class="btn btn-icon btn-secondary">⚙️</button>
<button class="btn btn-icon btn-accent">❤️</button>

Floating Action Button

<button class="btn-fab">+</button>

Split Buttons

<div class="btn-split">
  <button class="btn btn-primary">Save</button>
  <button class="btn btn-primary btn-split-arrow">▼</button>
  <div class="dropdown-content">
    <a href="#" class="dropdown-item">Save as...</a>
    <a href="#" class="dropdown-item">Save & Exit</a>
  </div>
</div>

Loading Buttons

<button class="btn btn-primary btn-loading">
  <span class="loading-spinner"></span>
  Loading...
</button>

Cards

Versatile content containers with glass morphism effects and hover animations.

Basic Card

Card Title

This is a basic card with some content. Cards have glass morphism effects and smooth hover animations.

<div class="card">
  <div class="card-body">
    <h3 class="card-title">Card Title</h3>
    <p>Card content goes here...</p>
    <div class="card-actions">
      <button class="btn btn-primary">Action</button>
      <button class="btn btn-ghost">Learn More</button>
    </div>
  </div>
</div>

Card Variations

Compact Card

Less padding for tighter layouts.

Bordered Card

More defined border for emphasis.

<div class="card card-compact">
  <div class="card-body">
    <h3 class="card-title">Compact Card</h3>
    <p>Less padding for tighter layouts.</p>
  </div>
</div>

<div class="card card-bordered">
  <div class="card-body">
    <h3 class="card-title">Bordered Card</h3>
    <p>More defined border for emphasis.</p>
  </div>
</div>

Image Cards

Image Card

Cards with beautiful header images that support any aspect ratio.

Overlay Card

Content with image overlay effects.

<div class="card card-image">
  <figure class="card-image-top">
    <img src="image.jpg" alt="Card image">
  </figure>
  <div class="card-body">
    <h3 class="card-title">Image Card</h3>
    <p>Card content...</p>
  </div>
</div>

Interactive Cards

Flip Card

Click to flip and see the back!

Click me!

Back Side

This is the back of the card with different content.

Expandable Card

Click to expand for more details.

This is additional content that appears when the card is expanded. It can contain more detailed information, images, or actions.

<div class="card card-interactive" onclick="this.classList.toggle('flipped')">
  <div class="card-front">
    <div class="card-body">
      <h3>Flip Card</h3>
      <p>Click to flip!</p>
    </div>
  </div>
  <div class="card-back">
    <div class="card-body">
      <h3>Back Side</h3>
      <p>Different content here</p>
    </div>
  </div>
</div>

Specialty Cards

John Smith

Senior Developer

Passionate about creating amazing user experiences with modern web technologies.

📈

Revenue Growth

+24.5%

Compared to last month

↗ Trending up

<div class="card card-profile">
  <div class="profile-header">
    <img src="avatar.jpg" alt="Profile" class="profile-avatar">
  </div>
  <div class="card-body">
    <h3 class="card-title">Name</h3>
    <p class="profile-role">Role</p>
    <p>Bio text...</p>
  </div>
</div>

Hero Sections

Full-screen hero sections with gradient backgrounds and centered content.

Basic Hero

Welcome to Sparky UI

Build beautiful, modern interfaces with our comprehensive component library.

<div class="hero">
  <div class="hero-content">
    <div class="text-center">
      <h1 class="text-5xl font-bold mb-4">Welcome to Sparky UI</h1>
      <p class="text-xl mb-8">Build beautiful interfaces.</p>
      <div class="flex gap-4 justify-center">
        <button class="btn btn-primary btn-lg">Get Started</button>
        <button class="btn btn-outline btn-lg">View Components</button>
      </div>
    </div>
  </div>
</div>

Containers & Grid

Layout containers and grid systems for organizing content.

Container

This content is centered with max-width constraints and responsive padding.

<div class="container">
  <!-- Your content here -->
</div>

Feature Grid

Feature 1

Grid item content.

Feature 2

Grid item content.

Feature 3

Grid item content.

<div class="feature-grid">
  <div class="card"><!-- Feature 1 --></div>
  <div class="card"><!-- Feature 2 --></div>
  <div class="card"><!-- Feature 3 --></div>
</div>

Navigation Bar

Responsive navigation bars with glass morphism effects and sticky positioning.

Basic Navbar

<div class="navbar">
  <div class="navbar-brand">Sparky UI</div>
  <div class="navbar-nav">
    <a href="#" class="navbar-link">Home</a>
    <a href="#" class="navbar-link">About</a>
    <a href="#" class="navbar-link">Services</a>
    <a href="#" class="navbar-link">Contact</a>
  </div>
</div>

Mega Menu Navigation

<div class="navbar navbar-mega">
  <div class="navbar-brand">Sparky UI</div>
  <div class="navbar-nav">
    <div class="nav-item has-mega">
      <a href="#" class="navbar-link">Products</a>
      <div class="mega-menu">
        <div class="mega-content">
          <div class="mega-column">
            <h4>Web Components</h4>
            <a href="#" class="mega-link">React Components</a>
            <a href="#" class="mega-link">Vue Components</a>
          </div>
          <div class="mega-column">
            <h4>Mobile</h4>
            <a href="#" class="mega-link">React Native</a>
            <a href="#" class="mega-link">Flutter</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Sticky Navigation with Scroll Effects

Scroll content area - navbar will shrink on scroll

<div class="navbar navbar-sticky" id="stickyNav">
  <div class="navbar-brand">
    <span class="brand-logo">🌟</span>
    <span class="brand-text">Spark</span>
  </div>
  <div class="navbar-nav">
    <a href="#" class="navbar-link">Home</a>
    <a href="#" class="navbar-link">Features</a>
  </div>
  <div class="navbar-actions">
    <button class="btn btn-ghost btn-sm">Login</button>
    <button class="btn btn-primary btn-sm">Sign Up</button>
  </div>
</div>

Mobile-First Responsive Navigation

<div class="navbar navbar-mobile" id="mobileNav">
  <div class="navbar-brand">Sparky UI</div>
  <button class="navbar-toggle" onclick="toggleMobileMenu()">
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
  </button>
  <div class="navbar-menu" id="mobileMenu">
    <div class="navbar-nav">
      <a href="#" class="navbar-link">Home</a>
      <a href="#" class="navbar-link">About</a>
    </div>
  </div>
</div>

Sidebar

Navigation sidebars with collapsible sections and smooth animations.

Sidebar Navigation

<div class="sidebar">
  <div class="sidebar-header">Navigation</div>
  <div class="sidebar-nav">
    <a href="#" class="sidebar-link active">Dashboard</a>
    <a href="#" class="sidebar-link">Projects</a>
    <a href="#" class="sidebar-link">Settings</a>
  </div>
</div>

Breadcrumbs

Navigation breadcrumbs showing the current page location.

Basic Breadcrumbs

<nav class="breadcrumbs">
  <a href="#" class="breadcrumb-item">Home</a>
  <span class="breadcrumb-separator">›</span>
  <a href="#" class="breadcrumb-item">Components</a>
  <span class="breadcrumb-separator">›</span>
  <span class="breadcrumb-item active">Breadcrumbs</span>
</nav>

Tabs

Tabbed interface for organizing content into sections.

Tab Navigation

Content for Tab 1

Content for Tab 2

Content for Tab 3

<div class="tabs">
  <button class="tab tab-active">Tab 1</button>
  <button class="tab">Tab 2</button>
  <button class="tab">Tab 3</button>
</div>
<div class="tab-content active">
  <div class="tab-panel">Content for Tab 1</div>
</div>

Dropdown

Dropdown menus with smooth animations and flexible positioning.

Basic Dropdown

<div class="dropdown">
  <button class="btn dropdown-toggle">Options ▼</button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Profile</a>
    <a href="#" class="dropdown-item">Settings</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Sign out</a>
  </div>
</div>

Form Inputs

Styled form inputs with focus states and validation support.

Input Fields

Name Email Message

<div class="fieldset">
  <label class="label">Name</label>
  <input type="text" class="input" placeholder="Enter your name">
  
  <label class="label">Email</label>
  <input type="email" class="input" placeholder="Enter your email">
  
  <label class="label">Message</label>
  <textarea class="input" placeholder="Enter your message"></textarea>
</div>

Search Inputs

Simple Search

🔍

Advanced Search

🔍

JavaScript Tutorials

React Components

CSS Animations

Web Development

<div class="input-group">
  <input type="search" class="input input-search" placeholder="Search...">
  <span class="input-icon">🔍</span>
</div>

Password Inputs

Password with Toggle

Password with Strength

Password strength

<div class="input-group">
  <input type="password" class="input" id="pwd" placeholder="Password">
  <button type="button" class="input-btn" onclick="togglePassword('pwd', this)">👁️</button>
</div>

Auto-Resize Textarea

Auto-expanding Message Character Counter

0/280

<textarea class="input textarea-auto" onkeyup="autoResize(this)"></textarea>

<div class="textarea-wrapper">
  <textarea class="input textarea-counter" maxlength="280" onkeyup="updateCounter(this)"></textarea>
  <div class="char-counter">
    <span class="char-count">0</span><span class="char-max">/280</span>
  </div>
</div>

Input Variations

Input with Icon

📧

Input with Button

Multi-line Input Group

<div class="input-group">
  <span class="input-icon-left">📧</span>
  <input type="email" class="input input-with-icon-left" placeholder="email@example.com">
</div>

<div class="input-group input-group-attached">
  <input type="text" class="input" placeholder="Enter code">
  <button class="btn btn-primary">Apply</button>
</div>

Toggles & Switches

Toggle switches and checkboxes with smooth animations.

Toggle Switch

Enable notifications Auto-save Small toggle

<label class="toggle">
  <input type="checkbox">
  <span class="toggle-slider"></span>
  <span class="toggle-label">Enable notifications</span>
</label>

Select Dropdowns

Custom styled select elements with search and multi-select capabilities.

Basic Select

<select class="select">
  <option>Choose an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Checkboxes & Radio

Styled checkboxes and radio buttons with custom designs.

Checkboxes

Checked option Unchecked option

<label class="checkbox-label">
  <input type="checkbox" class="checkbox">
  <span class="checkbox-mark"></span>
  Option text
</label>

Radio Buttons

Option 1 Option 2

<label class="radio-label">
  <input type="radio" name="group" class="radio">
  <span class="radio-mark"></span>
  Option text
</label>

Range Sliders

Interactive range sliders with custom styling and value display.

Basic Range

0 100

<input type="range" class="range" min="0" max="100" value="50">

File Upload

Drag and drop file upload zones with progress indicators.

File Drop Zone

📁

Drag files here or click to browse

Supports multiple file types

<div class="file-upload">
  <input type="file" class="file-input" id="file" multiple>
  <label for="file" class="file-label">
    <p>Drag files here or click to browse</p>
  </label>
</div>

Calendar & Date Picker

Interactive calendar components with date selection.

Date Input

<input type="date" class="date-input">

Badges

Small status and labeling components with various colors and sizes.

Badge Variants

Default Primary Success Warning Error

<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>

Badge Sizes

Small Default Large

<span class="badge badge-primary badge-sm">Small</span>
<span class="badge badge-primary">Default</span>
<span class="badge badge-primary badge-lg">Large</span>

Avatars

User avatar components with different sizes and placeholder options.

Avatar Sizes

JS

AB

CD

<div class="avatar avatar-sm">
  <div class="avatar-placeholder">JS</div>
</div>
<div class="avatar">
  <div class="avatar-placeholder">AB</div>
</div>

Avatar Group

A

B

C

+5

<div class="avatar-group">
  <div class="avatar"><div class="avatar-placeholder">A</div></div>
  <div class="avatar"><div class="avatar-placeholder">B</div></div>
  <div class="avatar"><div class="avatar-placeholder">C</div></div>
</div>

Tables

Data tables with sorting, filtering, and responsive design.

Basic Table

Name	Status	Role	Actions
John Doe	Active	Admin
Jane Smith	Pending	User

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td><span class="badge badge-success">Active</span></td>
      <td><button class="btn btn-sm">Edit</button></td>
    </tr>
  </tbody>
</table>

Enhanced Data Table with Sorting & Filtering

Name ↕️	Status ↕️	Role ↕️	Email ↕️
John Doe	Active	Admin	john@example.com
Jane Smith	Pending	User	jane@example.com
Mike Johnson	Inactive	Manager	mike@example.com
Sarah Wilson	Active	User	sarah@example.com
David Brown	Pending	Admin	david@example.com

<div class="table-controls">
  <div class="table-search">
    <input type="text" class="input input-sm" placeholder="Search table..." onkeyup="filterTable()">
  </div>
  <div class="table-filters">
    <select class="input input-sm" onchange="filterTable()">
      <option value="">All Status</option>
      <option value="Active">Active</option>
      <option value="Pending">Pending</option>
    </select>
  </div>
</div>
<table class="table table-enhanced">
  <thead>
    <tr>
      <th><input type="checkbox" onchange="toggleSelectAll()"></th>
      <th class="sortable" onclick="sortTable(1)">
        Name <span class="sort-indicator">↕️</span>
      </th>
      <th class="sortable">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="row-select"></td>
      <td>John Doe</td>
      <td><span class="badge badge-success">Active</span></td>
    </tr>
  </tbody>
</table>

Data Table with Pagination

#	Product	Category	Price	Stock	Status

Showing 1-10 of 25 results

<table class="table table-paginated">
  <thead>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!-- Rows populated by JavaScript -->
  </tbody>
</table>
<div class="pagination-container">
  <div class="pagination">
    <button onclick="changePage('prev')">Previous</button>
    <div class="pagination-numbers"></div>
    <button onclick="changePage('next')">Next</button>
  </div>
</div>

Responsive Table with Card View

Order ID	Customer	Date	Amount	Status	Payment	Actions
#12345	John Doe	2024-01-15	$299.99	Completed	Credit Card
#12346	Jane Smith	2024-01-14	$149.50	Processing	PayPal

<div class="table-responsive">
  <table class="table table-card-responsive">
    <thead>
      <tr>
        <th>Order ID</th>
        <th>Customer</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Order ID">#12345</td>
        <td data-label="Customer">John Doe</td>
        <td data-label="Amount">$299.99</td>
      </tr>
    </tbody>
  </table>
</div>

Statistics

Statistical data displays with icons and trend indicators.

Stat Cards

📊

12,345

Total Users

+5% from last month

💰

$54,321

Revenue

+12% from last month

<div class="stat">
  <div class="stat-icon">📊</div>
  <div class="stat-value">12,345</div>
  <div class="stat-title">Total Users</div>
  <div class="stat-desc">+5% growth</div>
</div>

Timeline

Vertical timeline component for displaying chronological events.

Event Timeline

Project Started

Initial planning and setup completed

January 2024

Development Phase

Core features implemented

March 2024

Launch

Product officially launched

June 2024

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <h4>Event Title</h4>
      <p>Event description...</p>
      <span class="timeline-time">Date</span>
    </div>
  </div>
</div>

Ratings

Star rating components with interactive selection.

Star Rating

⭐ ⭐ ⭐ ⭐ ⭐ (4.0 out of 5)

<div class="rating">
  <span class="star filled">⭐</span>
  <span class="star filled">⭐</span>
  <span class="star filled">⭐</span>
  <span class="star">⭐</span>
  <span class="star">⭐</span>
</div>

Alerts

Contextual feedback messages with different severity levels.

Alert Types

ℹ️ This is an informational alert with some helpful information.

✅ Success! Your changes have been saved successfully.

⚠️ Warning: Please check your input before proceeding.

❌ Error: Something went wrong. Please try again.

<div class="alert alert-info">
  ℹ️ This is an informational alert.
</div>
<div class="alert alert-success">
  ✅ Success! Changes saved.
</div>
<div class="alert alert-warning">
  ⚠️ Warning: Check your input.
</div>
<div class="alert alert-error">
  ❌ Error: Something went wrong.
</div>

Progress Bars

Visual progress indicators with gradient fills and animation effects.

Progress Indicators

Downloading...

Upload Progress

Processing

<div class="progress">
  <div class="progress-bar" style="width: 75%"></div>
</div>

<div class="progress progress-lg">
  <div class="progress-bar" style="width: 45%"></div>
</div>

<div class="progress progress-sm">
  <div class="progress-bar" style="width: 90%"></div>
</div>

Loading States

Loading indicators and skeleton screens for better user experience.

Spinners

<div class="spinner"></div>
<div class="spinner spinner-lg"></div>
<div class="dots-loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

Skeleton Loading

<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text" style="width: 60%;"></div>
<div class="skeleton skeleton-rect" style="height: 100px;"></div>

Progress Indicators

65%

70%

1

2

3

4

5

<div class="progress-bar">
  <div class="progress-fill" style="width: 65%"></div>
  <span class="progress-text">65%</span>
</div>

<div class="progress-circle">
  <svg class="progress-ring" width="80" height="80">
    <circle class="progress-ring-circle" stroke="currentColor" stroke-width="4" fill="transparent" r="36" cx="40" cy="40"/>
  </svg>
  <span class="progress-circle-text">70%</span>
</div>

<div class="step-progress">
  <div class="step completed">1</div>
  <div class="step active">2</div>
  <div class="step">3</div>
</div>

Advanced Skeleton Screens

<div class="skeleton-card">
  <div class="skeleton skeleton-avatar"></div>
  <div class="skeleton-content">
    <div class="skeleton skeleton-title"></div>
    <div class="skeleton skeleton-text"></div>
    <div class="skeleton skeleton-text" style="width: 80%;"></div>
  </div>
</div>

<div class="skeleton-list-item">
  <div class="skeleton skeleton-circle"></div>
  <div class="skeleton-content">
    <div class="skeleton skeleton-text"></div>
    <div class="skeleton skeleton-text" style="width: 60%;"></div>
  </div>
</div>

Enhanced Spinners & Loading States

Pulse Loader

Wave Loader

Bounce Spinner

Ring Loader

<div class="pulse-loader">
  <div class="pulse-dot"></div>
  <div class="pulse-dot"></div>
  <div class="pulse-dot"></div>
</div>

<div class="wave-loader">
  <div class="wave-bar"></div>
  <div class="wave-bar"></div>
  <div class="wave-bar"></div>
</div>

<div class="spinner-bounce">
  <div class="bounce-dot"></div>
  <div class="bounce-dot"></div>
</div>

<div class="ring-loader">
  <div class="ring-segment"></div>
  <div class="ring-segment"></div>
  <div class="ring-segment"></div>
  <div class="ring-segment"></div>
</div>

Lazy Loading Content

Item 1 - Already loaded

Item 2 - Already loaded

Item 3 - Already loaded

<div class="lazy-load-container">
  <div class="lazy-load-item">Content item</div>
  
  <div class="lazy-load-trigger">
    <div class="lazy-loading" style="display: none;">
      <div class="spinner"></div>
      <span>Loading more items...</span>
    </div>
    <button onclick="loadMoreItems()">Load More</button>
  </div>
</div>

Loading Overlays & States

Content Card

This card has content that can be loaded dynamically.

<div style="position: relative;">
  <div class="card">
    <!-- Card content -->
  </div>
  <div class="loading-overlay">
    <div class="loading-content">
      <div class="spinner spinner-lg"></div>
      <p>Loading content...</p>
    </div>
  </div>
</div>

<div class="lazy-image" data-src="image-url">
  <div class="image-skeleton">
    <div class="skeleton skeleton-rect"></div>
    <button onclick="loadImage(this)">Load Image</button>
  </div>
</div>

Enhanced Loading Components

Advanced loading states with programmatic control and callbacks.

Progress Tracker

0%

Skeleton Loader

Original content that will be replaced

with skeleton loader when loading.

Loading Manager

Indeterminate Progress

Used when progress cannot be determined

Loading Animations

Loading

Pulse Loading Effect

// Create a progress tracker
const tracker = createProgressTracker('#myProgress', {
  onComplete: () => console.log('Done!'),
  onProgress: (value) => console.log(value + '%')
});
tracker.start();

// Create skeleton loader
const skeleton = createSkeletonLoader('#content', {
  lines: 3,
  avatar: true,
  width: ['100%', '80%', '60%']
});
skeleton.show();

// Use loading manager
loadingManager.setLoading('#myButton', {
  text: 'Processing...',
  spinner: true
});

// Clear loading state
loadingManager.clearLoading('#myButton');

<!-- Indeterminate progress bar -->
<div class="progress-indeterminate"></div>

<!-- Loading dots animation -->
<div class="loading-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

<!-- Pulse loading effect -->
<div class="loading-pulse">Content with pulse effect</div>

<!-- Loading state container -->
<div class="loading-state-container" id="container">
  <div class="loading-state-overlay">
    <div class="spinner"></div>
  </div>
  <!-- Content here -->
</div>

Toast Notifications

Non-intrusive notification messages with auto-dismiss.

Toast Types

✅

Success!

Your action was completed successfully.

⚠️

Warning

Please review your input.

<div class="toast toast-success">
  <span class="toast-icon">✅</span>
  <div class="toast-content">
    <div class="toast-title">Success!</div>
    <div class="toast-message">Message here</div>
  </div>
</div>

Banners

Full-width notification banners for important announcements.

Announcement Banner

<div class="banner banner-info">
  <div class="banner-content">
    <span class="banner-icon">📢</span>
    <div class="banner-text">Message content</div>
    <button class="banner-action">Action</button>
  </div>
</div>

Empty States

Helpful empty state illustrations with call-to-action buttons.

No Data Found

📭

No items found

You don't have any items yet. Create your first item to get started.

<div class="empty-state">
  <div class="empty-state-icon">📭</div>
  <h3 class="empty-state-title">No items found</h3>
  <p class="empty-state-description">Description...</p>
  <button class="btn btn-primary">Action</button>
</div>

Error Pages

Full-page error states with helpful messaging and actions.

404 Not Found

404

Page Not Found

The page you're looking for doesn't exist or has been moved.

<div class="error-page">
  <div class="error-code">404</div>
  <h1 class="error-title">Page Not Found</h1>
  <p class="error-description">Description...</p>
  <div class="error-actions">
    <button class="btn btn-primary">Go Home</button>
  </div>
</div>

Modals

Overlay dialogs with backdrop blur and smooth animations.

Modal Dialog

<div class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3 class="modal-title">Modal Title</h3>
      <button class="modal-close">×</button>
    </div>
    <div class="modal-body">
      <p>Modal content goes here...</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-ghost">Cancel</button>
      <button class="btn btn-primary">Save</button>
    </div>
  </div>
</div>

Command Palette

Advanced search and command interface with keyboard shortcuts and fuzzy search.

Command Palette Interface

Navigation

🏠

Go to Home

Navigate to homepage

⌘H

📚

Documentation

View documentation

⌘D

Components

🔘

Buttons

Button components

📝

Forms

Form components

🎴

Cards

Card layouts

Actions

🎨

Toggle Theme

Switch between light/dark

⌘T

📋

Copy URL

Copy current page URL

⌘C

<div class="command-palette-overlay">
  <div class="command-palette">
    <div class="command-palette-header">
      <input class="command-search-input" placeholder="Search...">
    </div>
    <div class="command-palette-body">
      <div class="command-section">
        <div class="command-section-title">Navigation</div>
        <div class="command-item">
          <div class="command-icon">🏠</div>
          <div class="command-content">
            <div class="command-title">Go to Home</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Tooltips

Contextual information overlays that appear on hover or focus.

Tooltip Variations

<button class="btn" data-tooltip="Tooltip text">
  Hover me
</button>

Popovers

Clickable overlays with rich content and positioning options.

Content Popover

<div class="popover-wrapper">
  <button class="btn" onclick="togglePopover('popover')">
    Show Popover
  </button>
  <div class="popover" id="popover">
    <div class="popover-content">Content...</div>
  </div>
</div>

Accordion

Collapsible content sections with smooth expand/collapse animations.

Accordion Panel

Sparky UI is a modern Tailwind CSS component library with 50+ components featuring glass morphism effects and automatic theming.

Simply install via npm and add it to your Tailwind config. Then start using the components in your HTML.

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header">
      <span>Question</span>
      <span class="accordion-icon">+</span>
    </button>
    <div class="accordion-content">
      <div class="accordion-body">Answer content...</div>
    </div>
  </div>
</div>

Collapsible Panels

Expandable content panels with smooth animations.

Collapsible Content

This is the collapsible content that can be toggled. It supports any type of content including images, forms, and other components.

<div class="collapsible-panel">
  <button class="collapsible-trigger">
    <span>Toggle Content</span>
    <span class="collapse-icon">▼</span>
  </button>
  <div class="collapsible-content">
    <div class="collapsible-body">Content...</div>
  </div>
</div>

Image Gallery

Responsive image galleries with hover effects and lightbox support.

Photo Gallery

<div class="gallery">
  <div class="gallery-item">
    <img src="image.jpg" alt="Description">
    <div class="gallery-overlay">
      <button class="gallery-btn">View</button>
    </div>
  </div>
</div>

Lightbox

Full-screen image and media viewer with navigation controls.

Lightbox Modal

<img class="lightbox-trigger" onclick="openLightbox('id')" src="thumb.jpg">
<div class="lightbox" id="id">
  <div class="lightbox-content">
    <button class="lightbox-close">×</button>
    <img src="full.jpg" alt="Full size">
  </div>
</div>

Carousel

Image and content carousels with navigation arrows and indicators.

Image Carousel

Slide 1 Title

Beautiful landscape photography

Slide 2 Title

Another stunning view

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-slide active">
      <img src="image1.jpg" alt="Slide 1">
    </div>
    <div class="carousel-slide">
      <img src="image2.jpg" alt="Slide 2">
    </div>
  </div>
  <button class="carousel-prev">‹</button>
  <button class="carousel-next">›</button>
</div>

Chat Bubbles

Modern chat interface components with directional styling.

Chat Conversation

Hello! How can I help you today?

I'm interested in learning more about Sparky UI components.

Great! We have over 50 modern components with glass morphism effects and dark/light theming.

<div class="chat">
  <div class="chat-bubble chat-bubble-start">
    Hello! How can I help you today?
  </div>
  <div class="chat-bubble chat-bubble-end">
    I'm interested in learning more about Sparky UI.
  </div>
  <div class="chat-bubble chat-bubble-start">
    Great! We have 50+ modern components.
  </div>
</div>

Testimonials

Customer testimonial cards with ratings and profile information.

Testimonial Cards

⭐ ⭐ ⭐ ⭐ ⭐

"Spark UI has completely transformed our development process. The components are beautiful and incredibly easy to implement."

John Doe

Frontend Developer

⭐ ⭐ ⭐ ⭐ ⭐

"The glass morphism effects and theming system are exactly what we needed for our modern application."

Jane Smith

UI/UX Designer

<div class="testimonial">
  <div class="testimonial-content">
    <div class="testimonial-rating">⭐⭐⭐⭐⭐</div>
    <p class="testimonial-text">Testimonial text...</p>
  </div>
  <div class="testimonial-author">
    <div class="author-avatar">
      <img src="avatar.jpg" alt="Author">
    </div>
    <div class="author-info">
      <h4>Author Name</h4>
      <p>Job Title</p>
    </div>
  </div>
</div>

Pricing Cards

Pricing plan cards with feature lists and call-to-action buttons.

Pricing Plans

Basic

$9 /month

✓ 10 Projects

✓ Basic Support

✓ 1GB Storage

✗ Advanced Features

Pro

$29 /month

✓ Unlimited Projects

✓ Priority Support

✓ 100GB Storage

✓ Advanced Features

<div class="pricing-card">
  <div class="pricing-header">
    <h3>Plan Name</h3>
    <div class="pricing-price">
      <span class="price-amount">$29</span>
      <span class="price-period">/month</span>
    </div>
  </div>
  <div class="pricing-features">
    <div class="feature">✓ Feature 1</div>
    <div class="feature">✓ Feature 2</div>
  </div>
  <button class="btn btn-primary">Choose Plan</button>
</div>

Code Editor

Syntax-highlighted code blocks with copy functionality.

Code Block

JavaScript

function createComponent() {
  const element = document.createElement('div');
  element.className = 'card';
  element.innerHTML = `
    <h2>Hello World</h2>
    <p>This is a component</p>
  `;
  return element;
}

<div class="code-editor">
  <div class="code-header">
    <span class="code-language">JavaScript</span>
    <button class="code-copy">Copy</button>
  </div>
  <pre><code>// Your code here</code></pre>
</div>

Glass Morphism

Beautiful glass morphism effects with backdrop blur and transparency.

Glass Utility

Glass Morphism Card

This card uses the .glass utility class to create a beautiful frosted glass effect.

<div class="glass p-8 rounded-2xl">
  <h3>Glass Morphism Card</h3>
  <p>Beautiful frosted glass effect.</p>
</div>

Gradients

Beautiful gradient backgrounds and text effects.

Gradient Backgrounds

Sunset Gradient

Linear gradient from orange to purple

Ocean Gradient

Radial gradient from blue to teal

Forest Gradient

Conic gradient with multiple colors

<div class="gradient-1">
  background: linear-gradient(135deg, #ff6b6b, #a855f7);
</div>

<div class="gradient-2">
  background: radial-gradient(circle, #3b82f6, #10b981);
</div>

Background Effects

Animated backgrounds and visual effects for enhanced user experience.

Floating Elements

Animated Background

Subtle floating shapes create visual interest

<div class="floating-shapes">
  <div class="floating-shape shape-1"></div>
  <div class="floating-shape shape-2"></div>
  <div class="floating-shape shape-3"></div>
</div>

Installation

1. Install via NPM

2. Add to Tailwind Config

3. Import CSS

Quick Start

Basic Usage

Theming

Dark Mode Toggle

Buttons

Button Variants

Button Styles

Button Sizes

Button Groups

Icon Buttons

Floating Action Button

Split Buttons

Loading Buttons

Cards

Basic Card

Card Title

Card Variations

Compact Card

Bordered Card

Image Cards

Image Card

Overlay Card

Interactive Cards

Flip Card

Back Side

Expandable Card

Specialty Cards

John Smith

Revenue Growth

Hero Sections

Basic Hero

Welcome to Sparky UI

Containers & Grid

Container

Feature Grid

Feature 1

Feature 2

Feature 3

Navigation Bar

Basic Navbar

Mega Menu Navigation

Web Components

Mobile

Desktop

🚀 New Release

Sticky Navigation with Scroll Effects

Mobile-First Responsive Navigation

Sidebar

Sidebar Navigation

Breadcrumbs

Basic Breadcrumbs

Tabs

Tab Navigation

Dropdown

Basic Dropdown

Form Inputs

Input Fields

Search Inputs

Password Inputs

Auto-Resize Textarea

Input Variations

Toggles & Switches

Toggle Switch

Select Dropdowns

Basic Select

Checkboxes & Radio

Checkboxes

Radio Buttons

Range Sliders

Basic Range

File Upload

File Drop Zone

Calendar & Date Picker

Date Input

Badges

Badge Variants