Typography

Headings

Heading 1 (64px)

Heading 2 (48px)

Heading 3 (36px)

Heading 4 (32px)

Heading 5 (24px)

Heading 6 (20px)

Display Text

Creative Display Text

Body Text

Large body text (18px) - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Regular body text (16px) - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small body text (12px) - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Utility Classes

Text Colors

Primary Secondary Tertiary Brand Accent

Links

This is a link

Code

Inline Code

This is inline code within text.

Code Block

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('ajaRED'));

Button

Variants

Sizes

States

Disabled

Loading

With Icons

Icon Only

Rounded

Full Width

Button Group

Separated

Attached

Input

Text Input

Email Address We'll never share your email

Textarea

Message

Select

Country

Checkbox & Radio

I agree to the terms and conditions Subscribe to newsletter

Basic Plan Pro Plan

Input States

Error State Please enter a valid email

Success State Email is valid

Disabled

Card

Basic Card

Card Title

This is a basic card with header, body, and footer sections. Cards are versatile containers for content.

Card Variants

Default

Standard shadow

Flat

No shadow, bordered

Elevated

Higher shadow

Alert

Alert Types

✓

Success!

Your changes have been saved successfully.

⚠

Warning

Please review your information before proceeding.

✕

Error

Something went wrong. Please try again.

ℹ

Info

Here's some helpful information for you.

Filled Variant

✓

Success filled alert

✕

Error filled alert

Badge

Badge Variants

Default Primary Secondary Success Warning Error Info

Badge Sizes

Small Medium Large

Outlined Badges

Primary Success Error

Dot Badges

Notifications

Messages

Spinner

Spinner Sizes

Spinner Colors

Dots Spinner

With Text

Loading...

Modal

Modal component requires JavaScript for functionality. View the source code for implementation details.

Modal preview:

Components