Enhanced UI Component Library

Improved components with multiple variants and better functionality

General

Buttons

Normal

Medium

Small

buttons.html
buttons.css
background-color: #3b82f6; }
buttons.js
const button = document.querySelector('.btn');

Accordions

Basic Accordion

This product is designed to help users manage their tasks efficiently with a clean and intuitive interface.

Simply sign up for an account, complete your profile, and you can start creating tasks immediately.

Yes, we have mobile apps available for both iOS and Android devices.

buttons.html
buttons.css
Accordion background-color: #3b82f6; }
buttons.js
Accordion button = document.querySelector('.btn');

Lists

Normal List

  • Profile Settings
  • Notifications
  • Privacy & Security
  • Appearance
  • Help & Support

Tree Dropdown List

    • John Smith - Manager
    • Sarah Johnson - Executive
    • Mike Davis - Associate
    • Emily Chen - Lead Developer
    • Alex Rodriguez - Frontend
    • David Kim - Backend
    • Lisa Wang - Team Lead
    • Tom Wilson - Specialist

Progress Bars

Basic Progress

75%
45%
60%
30%

Advanced Progress

65%
Small
Large
75%

Tabs

Horizontal Tabs

Profile Information

Manage your personal information and account settings.

Account Settings

Configure your application preferences and options.

Notification Preferences

Choose how and when you want to be notified.

Security Settings

Manage your password and security options.

Vertical Tabs

Dashboard Overview

View your business metrics and key performance indicators.

Order Management

Track and manage customer orders and shipments.

Customer Database

Manage customer information and communication history.

Business Analytics

Analyze trends and make data-driven decisions.

Text Inputs - 3 Variants

Variant 1: Label Above with tooltip

Variant 2: Label Over Border

Variant 3: Floating Label

Dropdowns - 3 Variants

Variant 1: Label Above

Select Country
United States
Canada
United Kingdom
Australia
Germany

Variant 2: Label Over Border

Select Category
Technology
Design
Business
Art & Creative
Science

Variant 3: Floating Label

Technology
Design
Business

Searchable Dropdown

Search Products

Numeric Steppers - 2 Variants

Variant 1: Inline Buttons

Variant 2: Blue Background

Items:

File Upload - 2 Variants

Variant 1: Drag & Drop

Drag & drop your files here or

Variant 2: Input with Button

×

Multiple Select with Tags

Select Skills

JavaScript × React ×
✓
JavaScript
✓
React
Vue.js
Angular
Node.js

Toggle Switches

Toggle Options

Enable Notifications
Dark Mode

Radio & Checkbox

Selection Options

Range Inputs - 2 Variants

Variant 1: Dual Range

Selected range: $100 - $500

Variant 2: Single Range

Current value: 75

Color Picker Inputs - 2 Variants

Border Colors

Variant 2: Advanced Color Picker

Date Input

Time Selector

12:00 PM

Select Date

November 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6