UI Components Showcase

Buttons

Dialogs & Dropdowns

Forms & Inputs

[email protected]
Progress: 65%

Tabs

Overview Content

This is the overview tab with important metrics and information.

Accordion

Code Display

example.ts

Custom Cursor

Move your cursor around this area to see the custom cursor effect

Cards

Simple Card
A basic card with title and description

This is a simple card component that can contain any content.

Card with Badge
This card includes badges for status
New
Active
Featured

Badges help categorize and highlight important information.

Interactive Card
With action button
Live

Cards can include interactive elements and actions.

Status Card
System metrics
Online
CPU Usage45%
Memory72%
Product Card
Premium subscription
Hot
$29/month
  • ✓
    Unlimited projects
  • ✓
    Priority support
Notification Card
Recent activity
New

New message received

2 minutes ago

Info

System update available

1 hour ago

Badges

Default
Outline
Success
Destructive
Shine
Animated Border
Rotate Border
Badge Combinations
Badges work great in different contexts

Status Indicators:

Completed
In Progress
Pending
Failed

Category Tags:

Design
Development
Marketing
Sales

Animated Badges:

Premium
Exclusive
Featured

Avatars

With Image

U1U2U3

Fallback

JDABCD

Sizes

SMMDLGXL
Avatar with User Info
Profile card example
PR

John Doe

[email protected]

Developer
Active

Scroll Area

Vertical Scroll
Scrollable content area
U1

Item 1

Description for item 1

1
U2

Item 2

Description for item 2

2
U3

Item 3

Description for item 3

3
U4

Item 4

Description for item 4

4
U5

Item 5

Description for item 5

5
U6

Item 6

Description for item 6

6
U7

Item 7

Description for item 7

7
U8

Item 8

Description for item 8

8
U9

Item 9

Description for item 9

9
U10

Item 10

Description for item 10

10
U11

Item 11

Description for item 11

11
U12

Item 12

Description for item 12

12
U13

Item 13

Description for item 13

13
U14

Item 14

Description for item 14

14
U15

Item 15

Description for item 15

15
U16

Item 16

Description for item 16

16
U17

Item 17

Description for item 17

17
U18

Item 18

Description for item 18

18
U19

Item 19

Description for item 19

19
U20

Item 20

Description for item 20

20
Code Preview
Scrollable code block
function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Count changed:', count);
  }, [count]);

  return (
    <div className="container">
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrement
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

export default Example;

Loading States

Skeleton Loading
Placeholder for content
Spinner Loading
Animated loading indicators
Small spinner
Medium spinner
Large spinner
Loading content...