|$ curl https://forge-ai.dev/api/markdown?path=docs/components
$cat docs/ui-components.md
updated Recentlyยท8 min readยทpublished

UI Components

โ—†CSSโ—†HTMLโ—†Tailwindโ—†Bootstrapโ—†UIโ—†Intermediate๐ŸŽฏFree Tools
Component Library

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

All examples use the ForgeLearn dark terminal palette by default. The Tailwind and Bootstrap tabs include inline overrides so previews render correctly even on dark pages.
Buttonsโ†’

Variants, sizes, shapes, icons, groups, loading, and social buttons in HTML, Tailwind, and Bootstrap.

Badges & Tagsโ†’

Status badges, count indicators, pills, outline chips, and removable tags.

Alertsโ†’

Info, success, warning, and error alerts with dismissible and rich action variants.

Navigationโ†’

Navbars, tabs, sidebars, breadcrumbs, pagination, and step indicators.

Inputs & Controlsโ†’

Text fields, input groups, selects, toggles, checkboxes, radios, sliders, and ratings.

Formsโ†’

Complete form layouts with validation, floating labels, and sign-up patterns.

Cardsโ†’

Basic, horizontal, pricing, testimonial, stat, and interactive cards.

Modalsโ†’

Confirmation dialogs, form modals, alert modals, slide panels, and sizing.

Dropdownsโ†’

Hover and click menus, nested submenus, split buttons, and directions.

Tooltipsโ†’

Positioned, colored, sized, and rich-content tooltips.

Tabsโ†’

Underline, pill, filled, icon, vertical, and card tabs.

Accordionsโ†’

Native details, single-open, FAQ, and multi-open accordions.

Tables & Data Displayโ†’

Tables, timelines, avatars, badges, skeletons, progress, and stat cards.

Toastโ†’

Notification toasts with positions, stacking, actions, and progress bars.

Toggleโ†’

Switches, toggle buttons, segmented controls, and loading states.

Progressโ†’

Linear, circular, striped, stepped, and multi-segment progress.

Skeletonโ†’

Placeholder loaders for cards, lists, forms, and dashboards.

Slidersโ†’

Range sliders with labels, steps, color variants, and dual handles.

Steppersโ†’

Horizontal, vertical, numbered, and timeline step indicators.

Timelineโ†’

Vertical, horizontal, alternating, and grouped timelines.

Carouselsโ†’

Scroll-snap, arrows, autoplay, thumbnails, and hero carousels.

Paginationโ†’

Numbered pages, ellipsis, prev/next, dots, and load-more patterns.

Ratingโ†’

Star ratings with halves, custom icons, sizes, and review breakdowns.

Avatarโ†’

Initials, images, groups, status rings, and icon avatars.

Breadcrumbsโ†’

Slash, chevron, dot separators, collapsed, and dropdown breadcrumbs.

Command Paletteโ†’

Keyboard-driven search overlays with grouped results and shortcuts.

Context Menuโ†’

Right-click menus, nested submenus, and keyboard triggers.

Toolbarโ†’

Icon toolbars, overflow menus, vertical stacks, and view switchers.

File Uploadโ†’

Drag zones, multi-file previews, progress, validation, and compact inputs.

Color Pickerโ†’

Native inputs, swatches, HSL/hex pickers, palettes, and harmonies.

Tree Viewโ†’

Expandable trees with icons, selection, disabled states, and keyboard nav.

Resizable Panelsโ†’

Horizontal, vertical, constrained, and collapsible split panes.

Animations & Micro-interactionsโ†’

Modern CSS animations, transitions, skeleton shimmers, and motion patterns.

How to Use

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.