UI Components

Badges
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
Soft Rounded Badges
  • Indigo
  • Emerald
  • Red
  • Yellow
  • Blue
  • Sky
  • Cyan
  • Orange
  • Purple
  • Dark
  • Secondary
  • Light
Alerts
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!
Alert with icon
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
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!
Text Colors
Text Colors
  • .text-indigo-600
  • .text-emerald-600
  • .text-red-600
  • .text-yellow-500
  • .text-amber-500
  • .text-blue-600
  • .text-sky-500
  • .text-cyan-500
  • .text-orange-600
  • .text-purple-600
  • .text-slate-900
Background Colors
Background Colors
  • .bg-indigo-600
  • .bg-emerald-600
  • .bg-red-600
  • .bg-yellow-500
  • .bg-blue-600
  • .bg-sky-500
  • .bg-cyan-500
  • .bg-orange-600
  • .bg-purple-600
  • .bg-slate-800
  • .bg-slate-900
  • .bg-gray-50
  • .bg-white
Opacity
  • .bg-indigo-600
  • .bg-indigo-600 .opacity-95
  • .bg-indigo-600 .opacity-90
  • .bg-indigo-600 .opacity-80
  • .bg-indigo-600 .opacity-75
  • .bg-indigo-600 .opacity-70
  • .bg-indigo-600 .opacity-60
  • .bg-indigo-600 .opacity-50
  • .bg-indigo-600 .opacity-40
  • .bg-indigo-600 .opacity-30
  • .bg-indigo-600 .opacity-25
  • .bg-indigo-600 .opacity-20
  • .bg-indigo-600 .opacity-10
  • .bg-indigo-600 .opacity-5
  • .bg-indigo-600 .opacity-0
Accordions
Accordion

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.

Form Inputs
Form Inputs
Form Checkbox
Form Radio
Shadows
Shadows
  • .shadow
  • .shadow-sm
  • .shadow-md
  • .shadow-lg
  • .shadow-xl
  • .shadow-2xl
  • .shadow-none
Borders
Borders
  • .border-0
  • .border-2
  • .border-4
  • .border-8
  • .border
  • .border-t
  • .border-s
  • .border-b
  • .border-e
  • .border-x
  • .border-y
Border Styles
  • .border-solid
  • .border-dashed
  • .border-dotted
  • .border-double
Border Radious
  • .rounded-none
  • .rounded-sm
  • .rounded
  • .rounded-md
  • .rounded-lg
  • .rounded-xl
  • .rounded-2xl
  • .rounded-3xl
  • .rounded-full
Pagination
Pagination
Modals
Modals
Modal
Tables
Tables
LessonsTime
Lesson 1Watch Free
Lesson 2
Lesson 3
Lesson 4
Heading
Heading
  • 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)
Font Weight
Font Weight

.font-thin : The quick brown fox jumps over the lazy dog.

.font-extralight : The quick brown fox jumps over the lazy dog.

.font-light : The quick brown fox jumps over the lazy dog.

.font-normal : The quick brown fox jumps over the lazy dog.

.font-medium : The quick brown fox jumps over the lazy dog.

.font-semibold : The quick brown fox jumps over the lazy dog.

.font-bold : The quick brown fox jumps over the lazy dog.

.font-extrabold : The quick brown fox jumps over the lazy dog.

Icons
Icons
Feather Icons

There are 280+ feather icons and you can get all icons info from here: https://feathericons.com/

Ex. <i data-feather="mail" className="size-8"> </i>
Material Design Icons

There are 4400+ Material Design icons and you can get all icons info from here: https://materialdesignicons.com/

Ex. <i className="mdi mdi-home"> </i>
React Icons

There are 2200+ React Icons and you can get all icons info from here: https://react-icons.github.io/react-icons/search

Ex.
<FaBeer className="size-7"/>
LTRRTL