🎨 UI Components Showcase

Interactive demonstration of all available UI/UX components

Buttons

Button Variants

Different button styles for various actions

<button class="btn btn-primary btn-ripple">Primary</button>

Toast Notifications

Toast System

Non-intrusive notifications for user feedback

UIKit.toast.success('Success message');

Progress Indicators

Progress Bar

Visual feedback for loading states

UIKit.progress.set(50); // 50%

Modals

Modal Dialog

Overlay dialogs for important actions

UIKit.modal.create({ title: 'Title', content: '<p>Content</p>' });

Cards

Card Variants

Different card styles with hover effects

Basic Card

Simple card with border

Hover Lift Card

Lifts on hover

Glow Card

Glows on hover

<div class="card card-hover-lift">...</div>

Loading States

Skeleton & Spinner

Loading placeholders and spinners

<div class="spinner"></div>
<div class="skeleton"></div>

Color Palette

Design System Colors

Semantic color usage throughout the platform

Green

Orange

Blue

Purple

Pink

Red

Typography

Type Scale

Consistent typography hierarchy

Heading 1

Heading 2

Heading 3

Heading 4

Body Large

Body Regular

Caption

Code / Monospace

Empty States

Empty State Component

Friendly messages when no content is available

📭

No Items Found

Try adjusting your filters or create a new item