Bootstrap UI

Comprehensive showcase of Bootstrap-style UI elements built with CSS variables and zero external dependencies.

Accordion

Only one panel open at a time. Click a header to toggle.

This is the first item's accordion body. It is shown by default until another item is clicked. Each accordion panel slides open smoothly while the previously open panel closes.
This is the second item's accordion body. Accordions are ideal for FAQ sections, collapsible settings, or anywhere you want to conserve vertical space.
This is the third item's accordion body. The active header is highlighted with the accent color for clear visual feedback.
This is the fourth item's accordion body. You can nest any content inside — text, images, lists, or even other components.

Accordion Flush

Borderless accordion with only dividers between items.

This flush accordion removes the outer border and rounded corners, keeping only the dividers between items for a cleaner, more minimal look.
Flush accordions work well when embedded inside cards or sections that already have their own borders.
The behavior is identical to the standard accordion — only one item can be expanded at a time.
Use flush style for tighter integrations where you want the accordion to blend seamlessly with surrounding content.

Always Open Accordion

Multiple panels can be expanded simultaneously.

This accordion allows multiple items to stay open at the same time. Each panel toggles independently.
Opening this panel does not close the first one. This is useful when users need to compare content across panels.
This pattern works well for reference documentation, multi-section forms, or any UI where simultaneous visibility is helpful.
Each panel maintains its own open/closed state completely independent of the others.

Alerts with Icons

Dismissible alert variants with SVG icons, titles, and descriptions.

Primary Alert

This is a primary alert with an icon. It uses the accent color for emphasis and can be dismissed.

Secondary Alert

A muted secondary alert for less critical information. Useful for supplementary context.

Success Alert

Operation completed successfully! Your changes have been saved and applied.

Danger Alert

Something went wrong. Please check your input and try again.

Warning Alert

Heads up — this action cannot be undone. Please review before proceeding.

Info Alert

Here's some helpful information you might want to know about this feature.

Alert with Link

Alerts containing inline links for additional context.

A simple primary alert with an example link. Click it if you like.
A simple success alert with an example link. Click it if you like.
A simple danger alert with an example link. Click it if you like.
A simple warning alert with an example link. Click it if you like.
A simple info alert with an example link. Click it if you like.

Offcanvas

Sliding panels from different edges of the screen.

Placeholders / Skeleton Loaders

Animated loading placeholders for various content types.

Text Lines

Card

Avatar + Text

Table Rows

Badges

Colored badges in standard and pill shapes, plus badges in headings.

Standard Badges

PrimarySecondarySuccessDangerWarningInfoLightDark

Pill Badges

PrimarySecondarySuccessDangerWarningInfoLightDark

Badges in Headings

Heading 1 New

Heading 2 Beta

Heading 3 Active

Heading 4 Urgent

Heading 5 Pending
Heading 6 Info

Close Buttons

Close button variants in different sizes and styles.

Default

White (on dark background)

Disabled

Sizes (sm, md, lg)

Collapse

Toggle visibility with buttons. Includes basic, horizontal, and multi-target variants.

Basic Toggle

This collapsible content is toggled by the button above. It transitions smoothly with max-height and opacity.

Horizontal Collapse

This content expands horizontally instead of vertically.

Multi-Target Collapse

Panel A

First collapsible panel controlled by the same button.

Panel B

Second collapsible panel toggled simultaneously.

Navbar

Responsive navigation bars with brand, links, search, and hamburger menu.

Light Variant

Dark Variant

Pagination Variants

Pagination in various sizes, alignments, and states.

Basic

With Icons

Large

Small

Centered

Right-Aligned

Disabled States