Ui Components

Default Buttons

Use the button classes on an <a>, <button>, or <input> element.

Rounded Buttons

Use the button classes on an .rounded-full element.

Outline Buttons

Use the button classes on an .border .border-(color) element.

Outline Rounded Buttons

Use the button classes on an .border .border-(color) .rounded-full element.

Soft Buttons

Use the button classes on an .bg-(color)/5 .border-(color)/10 element.

Soft Rounded Buttons

Use the button classes on an .bg-(color)/5 .border-(color)/10 .rounded-full element.

Button Size

Use the button classes on an for small button .py-[5px] .px-4 for default button .py-2 .px-5 for large button .py-2.5 .px-8 element.

Default Badges

The default form of solid color badges.

  • Black
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Rounded Badges

The default form of solid color rounded badges.

  • Black
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Outline Badges

The default form of Outline color badges.

  • Black
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Outline Rounded Badges

The default form of Outline color rounded badges.

  • Black
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Soft Badges

The default form of Soft color badges.

  • Black
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Soft Rounded Badges

The default form of Soft color rounded badges.

  • Black
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages solid aleart.

A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
Soft Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages soft aleart.

A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
A simple alert—check it out!
Alert with Link

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages with link.

A simple alert—check it out! Click here!
A simple alert—check it out! Click here!
A simple alert—check it out! Click here!
A simple alert—check it out! Click here!
A simple alert—check it out! Click here!
Pagination

Simple pagination inspired by Rdio, great for apps and search results.

Heading

Traditional heading elements are designed to work best in the meat of your page content.

  • Hello (.text-xs)
  • Hello (.text-sm)
  • Hello (.text-base)
  • Hello (.text-lg)
  • Hello (.text-xl)
  • Hello (.text-2xl)
  • Hello (.text-3xl)
  • Hello (.text-4xl)
  • Hello (.text-5xl)
  • Hello (.text-6xl)
  • Hello (.text-7xl)
  • Hello (.text-8xl)
  • Hello (.text-9xl)
Dropdown Examples

The best part is you can do this with any button variant, too:

Dropdowns Variants

The best part is you can do this with any button variant, too:

Accordions Example

The best part is you can do this with any button variant, too:

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.

Modals

A rendered modal with header, body, and set of actions in the footer.

Tooltips

Add small overlays of content, like those on the iPad, to any element for housing secondary information.