UI Components
A collection of production-ready UI components built with semantic HTML and modern CSS. Each component now includes live previews and source code in three flavors: plain HTML/CSS, Tailwind CSS, and Bootstrap 5. Copy the version that fits your stack.
info
Variants, sizes, shapes, icons, groups, loading, and social buttons in HTML, Tailwind, and Bootstrap.
Status badges, count indicators, pills, outline chips, and removable tags.
Info, success, warning, and error alerts with dismissible and rich action variants.
Navbars, tabs, sidebars, breadcrumbs, pagination, and step indicators.
Text fields, input groups, selects, toggles, checkboxes, radios, sliders, and ratings.
Complete form layouts with validation, floating labels, and sign-up patterns.
Basic, horizontal, pricing, testimonial, stat, and interactive cards.
Confirmation dialogs, form modals, alert modals, slide panels, and sizing.
Hover and click menus, nested submenus, split buttons, and directions.
Positioned, colored, sized, and rich-content tooltips.
Underline, pill, filled, icon, vertical, and card tabs.
Native details, single-open, FAQ, and multi-open accordions.
Tables, timelines, avatars, badges, skeletons, progress, and stat cards.
Notification toasts with positions, stacking, actions, and progress bars.
Switches, toggle buttons, segmented controls, and loading states.
Linear, circular, striped, stepped, and multi-segment progress.
Placeholder loaders for cards, lists, forms, and dashboards.
Range sliders with labels, steps, color variants, and dual handles.
Horizontal, vertical, numbered, and timeline step indicators.
Vertical, horizontal, alternating, and grouped timelines.
Scroll-snap, arrows, autoplay, thumbnails, and hero carousels.
Numbered pages, ellipsis, prev/next, dots, and load-more patterns.
Star ratings with halves, custom icons, sizes, and review breakdowns.
Initials, images, groups, status rings, and icon avatars.
Slash, chevron, dot separators, collapsed, and dropdown breadcrumbs.
Keyboard-driven search overlays with grouped results and shortcuts.
Right-click menus, nested submenus, and keyboard triggers.
Icon toolbars, overflow menus, vertical stacks, and view switchers.
Drag zones, multi-file previews, progress, validation, and compact inputs.
Native inputs, swatches, HSL/hex pickers, palettes, and harmonies.
Expandable trees with icons, selection, disabled states, and keyboard nav.
Horizontal, vertical, constrained, and collapsible split panes.
Modern CSS animations, transitions, skeleton shimmers, and motion patterns.
Each component page shows a live preview and tabs for HTML/CSS, Tailwind, and Bootstrap. Switch tabs to see the same component implemented in each stack. Components are built with progressive enhancement โ many work without JavaScript, while interactive variants include lightweight vanilla JS.
- HTML/CSS โ copy into any static site or email template.
- Tailwind โ drop utility classes into React, Vue, or plain HTML projects.
- Bootstrap โ use Bootstrap 5 classes and components with dark overrides.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.