UI Components

Alerts
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
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!
Default Buttons
Rounded Buttons
Outline Buttons
Outline Rounded Buttons
Soft Buttons
Soft Rounded Buttons
Button Size
Default Badges
  • Indigo
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Rounded Badges
  • Indigo
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Outline Badges
  • Indigo
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Outline Rounded Badges
  • Indigo
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Soft Badges
  • Indigo
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Pagination

Dropdown Examples

Dropdowns Variants

Accordions Example

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

Popovers

Tooltips