UI Components Kitchen Sink

Input Component

Basic Input

Email Address

Password

Search

Input with Icons (Simulated)

Email with Icon

Phone Number

Select Component

Static Options Select

Select Status

Selected Value:

Categories Select

Select Category

Select a category to see details

Date & DateRange Components

Date Picker

Select Date

Selected Date:

DateRange Picker

Select Date Range

Select end date

Select start date

Selected Range:

Start:

End:

Duration:

SearchSelect Component (Premium)

Search & Select User

Find User

Selected User:

Search & Select Post

Find Post by Title

MultiSelect Component

Select Users

Selected: users

Selected Users

No users selected

DataTable Component

Posts

ID	Title	Body	User ID

No results found

Showing to of results

Per page:

Modal Component

Full-Screen Modal

SlideOver Component

Slide-Over Panel

SlideOver Panel

This is a slide-over panel that appears from the right side of the screen.

Perfect for:

Shopping carts
Filters and settings
Detail views
Navigation menus

Name

Email

Pacer (Top Loading Bar)

Page Loading Indicator

Pacer is a top-of-page loading bar (like YouTube or NProgress) that appears at the very top of the browser window during fetch/AJAX calls.

Usage with Fetch/AJAX

The Pacer creates a fixed canvas element at the top of the page that animates during loading:

Pacer.show() - Show loading bar when fetch starts
Pacer.progress(0.5) - Update progress (0-1)
Pacer.hide() - Hide when fetch completes

👇

Look DIRECTLY BELOW the navigation bar!

The blue-purple progress bar appears just under the nav when you click a button.

💡 Open your browser console (F12) to see confirmation messages when the bar shows/hides.

Example Code:

// Import Pacer
import { Pacer } from './components/ui/Pacer';

// Configure (optional)
Pacer.config({
  barThickness: 3,
  barColors: {
    0: '#3b82f6',    // Blue
    1: '#8b5cf6'     // Purple
  }
});

// Use with fetch
async function loadData() {
  Pacer.show();  // Show top loading bar

  try {
    const response = await fetch('/api/data');
    const data = await response.json();

    Pacer.hide();  // Hide when done
    return data;
  } catch (error) {
    Pacer.hide();  // Hide on error too
    throw error;
  }
}

Other Progress Indicators:

For inline progress bars (uploads, downloads, etc.), use standard HTML progress elements:

File Upload Progress 75%

Download Progress 45%

Badges & Tags

Status Badges

Primary Success Warning Error Default Purple Pink

Buttons

Button Variants