Danger Alert

Info Alert

Primary Alert

Secondary Alert

Success Alert

Warning Alert

Avatars

Badge on Icons

Badge on Avatars

Filled Primary Buttons

Outlined Primary Buttons

Link Button

Icon Button

Floating Button

Horizontal Text Card

Captain America

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Vertical Item Card

4+

Hulk Bobblehead

Elegant Lifestyle Super Hero Incredible Hulk Action Figure Limited Edition, Marvel Comics Character

₹416 ₹1,780 76% off

Text Overlay Card

You can hover to see overlay transition

Play

Marvel Studios' Eternals | Final Trailer

Marvel Entertainment

Dismiss Card with Shadow

Round Image

Square Image

Responsive Image

Resize your browser window, to see its responsiveness.

Text area

Form Input

Error Form Input

Two Columns Grid

Two Rows Grid

Three Columns Grid

Three Rows Grid

Ordered List

1. List Item One
2. List Item Two
3. List Item Three

1. List Item One
2. List Item Two
3. List Item Three

1. List Item One
2. List Item Two
3. List Item Three

1. List Item One
2. List Item Two
3. List Item Three

Unordered List

• List Item One
• List Item Two
• List Item Three

• List Item One
• List Item Two
• List Item Three

• List Item One
• List Item Two
• List Item Three

Category Checkbox List

• Bobblehead's
• Men's Clothing
• Kid's Clothing

Price Radio List

• Price - Low to High
• Price - High to Low

Notification Stacked List

• New Notification 1
• New Notification 2
• Viewed Notification
• Viewed Notification

Modal

Modal Demo

Desktop Variation One

Mobile Variation One

You can resize the browser width to see the hamburger in action

Filled Rating

Live Rating

Slider

Notification Toast

Notification Toast Demo

Stacked Notification Toast Demo

• Notification from Posh UI

  Hey! Now you can design your project faster and better with Posh UI

• Notification from Posh UI

  Hey! Now you can design your project faster and better with Posh UI

Tooltip Left

You can hover to see tooltip in action

Tooltip Right

You can hover to see tooltip in action

Alignment

Hey!👋 I am Left Aligned 😀

Hey!👋 I am Center Aligned 😀

Hey!👋 I am Right Aligned 😀

Display

Extra Small Posh UI

Small Posh UI

Medium Posh UI

Large Posh UI

Extra Large Posh UI

Extra Extra Large Posh UI

Headings

h1. Posh UI heading

h2. Posh UI heading

h3. Posh UI heading

h4. Posh UI heading

h5. Posh UI heading

h6. Posh UI heading

Inline text elements

They colored me 😔 in gray

You can see the text-decoration:overline

You can see the text-decoration: line-through

You can see the text-decoration: underline

Background

background: var(--COLOR-ADD-CART)

background: var(--COLOR-ADD-CARD-DARK)

background: var(--COLOR-AMBER-500)

background: var(--COLOR-LIME-200)

background: var(--COLOR-LIME-500)

background: var(--COLOR-RED-50)

background: var(--COLOR-RED-500)

background: var(--COLOR-SLATE-50)

background: var(--COLOR-SLATE-400)

background: var(--COLOR-STONE)

background: var(--COLOR-WHITE);

Hover to see background: var(--COLOR-ADD-CART-DARK)

Hover to see background: var(--COLOR-RED-500)

Hover to see background: var(--COLOR-SLATE-300)

Color

Font Size

font-size: 1.2rem

font-size: 1.5rem

font-size: 1.6rem

font-size: 1.7rem

font-size: 2rem

font-size: 3rem

Font Weight

font-weight: 100

font-weight: 200

font-weight: 300

font-weight: 400

font-weight: 500

font-weight: 600

font-weight: 700

font-weight: 800

font-weight: 900

font-weight: bold

font-weight: bolder

font-weight: lighter

font-weight: normal

Text Color

color: var(--COLOR-GRAY-500)

color: var(--COLOR-LIME-500)

color: var(--COLOR-LIME-600)

color: var(--COLOR-RED-500)

color: var(--COLOR-SLATE-600)

color: var(--COLOR-SLATE-800)

Hover to See the Color