React Bootstrap

General-purpose button component, supports multiple variants, sizes, and states.

Button group component that combines multiple buttons into a single unit, supporting horizontal/vertical arrangement and uniform sizing.

Icon button component for compact icon-only actions, supporting multiple variants, circle/rounded/square shapes, sizes, disabled/loading states, toggle behavior and link rendering.

List group component that displays a series of content in a flexible list container, supporting active/disabled states, links and buttons, flush and numbered styles, horizontal layout, contextual colors, badges and custom content.

Card component that provides a flexible and extensible content container, supporting header/footer, images, overlays, navigation and various color styles.

Close button component for dismissing content such as modals, alerts and toasts, with white variant and disabled state support.

Modal component that renders content in a dialog layer above the page, supporting sizes, fullscreen, centered/scrollable layouts, placements, custom sizing, static backdrops, focus trapping and transition animations.

Offcanvas component that renders a hidden side drawer panel above the page, supporting four placements with custom slide transitions, backdrop and keyboard options, body scroll control, focus management and reduced-motion preferences.

Dropdown component that toggles contextual overlays for displaying lists of links and actions, supporting split buttons, sizing, dark menus, six directions, menu items with active/disabled states, headers/dividers/text, forms, alignment, auto-close behavior and keyboard navigation.

Navbar component that builds responsive navigation headers, supporting brand, navigation links, forms and text, responsive collapse with toggler, color schemes, containers, fixed/sticky placement, scrolling navs and offcanvas drawers.

Alert component that provides contextual feedback messages for typical user actions, supporting eight variants, dismissible mode with fade animation, links, headings and icons.

Badge component that displays status, counts or labels in small inline content, supporting multiple background colors, pill shape, buttons and links, scaling with the parent font size.

Avatar component that displays user images or name initials, supporting automatic fallback when images fail to load, multiple sizes and shapes, background color variants and borders, plus AvatarGroup for stacked display, max-count folding and group-level defaults.

Breadcrumb component that indicates the current page location within a navigational hierarchy, supporting links, active state, custom dividers and accessible labels.

Pagination component that splits a set of links across multiple pages, supporting icon links, active/disabled states, sizing, alignment and accessible labels.

Placeholder component that renders skeleton loading placeholders for components and pages, supporting grid column widths, background colors, sizing, glow/wave animations and placeholder buttons.

Popover component that shows extended content in a floating card beside trigger elements, supporting header/body structure, four directions with alignment variations, HTML content, custom styling, delays, click/hover/focus/manual triggers, controlled mode, disabled elements and flip positioning.

Spinner component that indicates the loading state of a component or page, supporting border/grow animations, color variants, sizes and usage inside buttons.

Tabs component that builds navigation and tabbed panels, supporting tabs/pills/underline variants, fill and justify layouts, vertical arrangement, active/disabled states and fade transitions.

Toast component that pushes lightweight notifications to users, supporting header/body structure, stacking, nine placements, color schemes, autohide with hover pause and custom transitions.

Tooltip component that shows contextual hints beside trigger elements, supporting four directions with alignment variations, HTML content, custom styling, delays, click/hover/focus/manual triggers, controlled mode, disabled elements and flip positioning.

Progress component that displays the completion state of a task or workflow, supporting labels, custom heights, color variants, striped and animated stripes, stacked segments and manual composition of multiple bars.

Steps component that displays progress through a sequence of operations, supporting horizontal/vertical and centered layouts, dot indicators, custom icons, error status, disabled steps and clickable switching in controlled or uncontrolled mode.

Collapse component that toggles the visibility of content with an animated height or width transition, supporting vertical and horizontal dimensions, multiple targets, transition callbacks and reduced-motion preferences.

Accordion component that collapses vertically stacked content sections into interactive expandable panels, supporting single or multiple open items, flush styling, controlled/uncontrolled active keys, custom triggers and accessible button/collapse associations.

Carousel component that cycles through slides with reducer-driven custom slide and crossfade transitions, supporting indicators, controls, captions, autoplay with hover pause, per-slide intervals, keyboard and touch navigation, controlled mode and reduced-motion preferences.

ScrollSpy component that automatically updates navigation links based on the scroll position of a container or the page, supporting rootMargin/threshold observation options, smooth scrolling, controlled mode, context-based ScrollSpyLink links and plain HTML targets via selector.

Form component that composes form groups and controls, providing the Form container with native constraint validation support and FormGroup with controlId-based label/control auto-association, plus a single import surface for all form parts.

Form control component that renders inputs, selects and textareas with consistent Bootstrap styles, supporting sizing, disabled and readonly states, readonly plain text, file and color inputs, datalists, valid/invalid states, and the FormText helper text component.

Floating label component that renders a form control with a label that floats above the input, supporting textareas, selects, disabled and readonly plaintext states, input groups, validation states and grid layouts.

Input group component that combines text addons, buttons, dropdowns, checkboxes and radios with form controls, supporting prefix/suffix and multiple addons, multiple inputs, button and dropdown addons, segmented buttons, custom selects and file inputs, wrapping, sizing and validation states.

Form select component that renders native selects with customized appearance, supporting small/large sizing, multiple selection, visible option count, disabled state and valid/invalid validation states.

Form check component that renders consistent checkboxes, radios and switches, composing FormCheck, FormCheckInput and FormCheckLabel, supporting indeterminate and disabled states, inline/reverse layouts and valid/invalid validation states.

Form range component that renders a styled native range input, supporting min/max values, step intervals, disabled state and valid/invalid validation states.

Form feedback component that renders valid/invalid feedback text for form controls, supporting tooltip variants, browser native constraint validation with the was-validated form class and server-side validation states.

Layout components that structure forms with the grid system, providing Row and Col for multi-column form grids, gutters and alignment utilities, horizontal form labels with size variants, column sizing and auto-sizing, and responsive inline forms.

Container component that fixes the content width at each responsive breakpoint, supporting default, fluid and per-breakpoint responsive containers, custom semantic elements, and composition with the grid Row/Col components.

Upload component that collects files for submission, supporting click and drag-and-drop selection, multiple files and accept filtering, disabled state, max count and max size limits, per-file beforeUpload validation, controlled file lists, custom triggers and lists, plus UploadItem/UploadList/useUpload for flexible composition.

Input OTP component that captures one-time verification codes in single-character slots, supporting auto-advance, backspace and arrow key navigation, paste distribution, per-character patterns, password masking, separators, validation states, completion callbacks, controlled mode, hidden-field form submission, plus InputOtpSlot/useInputOtp for custom slot composition.

AutoComplete component that suggests matching options as the user types, composing AutoComplete with AutoCompleteMenu, AutoCompleteItem, AutoCompleteToken, AutoCompleteHint and AutoCompleteHighlighter, supporting single and multiple selection with removable tokens, keyboard navigation, input hints, new-option creation, match highlighting, controlled mode and custom rendering.

Table component that displays tabular data with Bootstrap styles, providing structural helpers for head/body/footer, rows, cells and captions, supporting contextual variants, striped rows/columns, hover and active states, bordered/borderless styles, small sizing, group dividers, vertical alignment, nesting, top captions, responsive scroll wrappers, plus selection cells, inline editable cells, loading/empty rows and useTable/useTableSelection/useTableEditing hooks for full CRUD interactions.

Code block component with syntax highlighting and copy-to-clipboard support.

Demo section component for showcasing runnable examples with source code.

Documentation template that composes a single component API reference page.

Color badge component that derives a stable background color from a name.

Collapsible table of contents for documentation navigation.

Documentation home component that renders component entries as a card grid.

Documentation layout component with sidebar navigation and footer.

Splitter component that divides content into resizable panels, supporting horizontal/vertical layouts, pixel/percentage/auto sizes, min/max constraints, collapsible panels, keyboard resizing, custom bars and controlled/uncontrolled modes.

Empty component that displays placeholder states for empty content areas, composing image, title, description and action buttons, with an EmptyImage placeholder supporting Lorem Picsum image URLs, solid color fallbacks when images fail to load, color variants, shapes and sizes.

Timeline component that displays events in chronological order along a vertical line, supporting left/right/alternate alignments, contextual node colors, custom dots, timestamps and rich item content, with the alternate layout collapsing to left alignment on narrow screens.

Kbd component that indicates keyboard input, rendering key caps and key combinations, supporting nested combined shortcuts, automatic scaling with the parent font size and custom element rendering.

ScrollShadow component that adds gradient scroll shadows to the edges of a scrollable container, supporting vertical, horizontal and bidirectional scrolling, custom shadow size and color, visibility change callbacks, RTL layouts and a useScrollShadow hook for custom composition.

Watermark component that overlays tiled text or image watermarks on content, supporting multiline text, image watermarks, rotation, gap, offset, opacity and z-index customization, fullscreen portal mode, plus a useWatermark hook for custom composition.

Sidebar component that builds application side navigation, supporting header/body/footer regions, grouped navigation items with icons, badges and active/disabled states, a collapsible icon-only rail mode, a responsive off-canvas drawer with backdrop on viewports below a configurable breakpoint, light/dark variants and start/end placements, plus SidebarProvider/useSidebar for controlled composition.

Ratio component that creates a responsive fixed-aspect-ratio container for images, videos, iframes and other media content, supporting the 1x1/4x3/16x9/21x9 presets, custom numeric and string ratios, and custom element rendering.

Image viewer components that preview images in an immersive lightbox, featuring click-to-preview Image thumbnails with fluid/rounded/thumbnail styles, ImageGroup for grouped multi-image browsing, and a full-featured ImageViewer with zoom, rotation, drag panning, keyboard shortcuts, thumbnail navigation, fullscreen and download support, plus useImageViewer for custom composition.

Typography component suite that renders rich text with Bootstrap typographic styles, providing Title/Text/Paragraph/Link sub-components with heading levels, inline styles (mark/code/keyboard/strong/italic/underline/delete), color types, copyable text, ellipsis with expandable rows, editable content and group-level defaults via the root component.

Blockquote component that displays quoted content, composing Blockquote and BlockquoteFooter sub-components, supporting source citations with cite elements, centered quotes and custom element rendering.

Code component that renders inline code snippets with Bootstrap code styling, supporting commands, package names and pre-wrapped code blocks, with automatic scaling based on the parent font size.

Mark component that highlights text content with Bootstrap mark styling, supporting search result marking and combination with strong/italic styles.

Abbr component that renders abbreviations with a dotted underline and hover tooltip via the title attribute, supporting the initialism uppercase style for acronyms.

Menu component that builds vertical and horizontal navigation menus, supporting inline and popup submenus, groups and dividers, icons, disabled and danger states, single and multiple selection, controlled/uncontrolled open keys, dark theme, collapsed icon-only rail mode and keyboard navigation.

Nav component that builds navigation links, supporting tabs/pills/underline variants, fill and justify layouts, vertical arrangement, active/disabled states, controlled/uncontrolled active keys and custom element rendering.

Nav dropdown component that embeds a dropdown menu inside Nav, supporting menu variants, alignment, drop directions, disabled state, controlled visibility and active-state syncing after item selection.