react-bootstrap-plugins

Production-grade Bootstrap 5 UI components for React 18+. Zero runtime dependencies. Tree-shakeable.

Components

Component	Guide	Description
DatePicker	DATEPICKER.md	Date, time, and datetime picker with popover calendar
SearchSelect	SEARCHSELECT.md	Filterable, searchable select dropdown
Label	LABEL.md	Bootstrap-styled form label with required indicator
TableLoading	TABLELOADING.md	Bootstrap 5 placeholder loading skeleton for table `<tbody>`
AutoTextarea	AUTOTEXTAREA.md	Auto-resizing textarea — grows with content up to `maxRows`/`maxHeight`, then scrolls
NavPills	NAVPILLS.md	Horizontal nav-pills tab strip with icons, dismissible pills, and “New” badges
InputCurrency	INPUTCURRENCY.md	Controlled currency input — numbers in/out, locale-formatted display, focus-based editing
ListGroup	LISTGROUP.md	Bootstrap list-group with active-state highlighting, icons, badges, and descriptions
FormRow	FORMROW.md	Form row wrapper — label, control, helper text, and required indicator
ConfirmDialog	CONFIRMDIALOG.md	Bootstrap 5 confirmation dialog with async loading state
Stepper	STEPPER.md	Step indicator with built-in Prev / Next / Action wizard footer

Each component guide includes full prop tables, usage examples, import patterns, and dark mode behavior.

Features

🎯 Zero runtime dependencies — only React and React DOM as peer dependencies
🌳 Tree-shakeable — import only what you need; unused components are stripped at build time
🎨 Bootstrap 5 native — uses CSS custom properties (--bs-*), respects dark mode via [data-bs-theme="dark"]
📦 ESM + CJS dual format — works with any bundler (Vite, webpack, Turbopack, Rollup)
🔒 TypeScript ready — full .d.ts declarations included
♿ Accessible — ARIA attributes, keyboard navigation, screen-reader friendly
📱 Responsive — mobile-optimized layouts for all components

Installation

npm install react-bootstrap-plugins
# or
pnpm add react-bootstrap-plugins
# or
yarn add react-bootstrap-plugins

Peer Dependencies

Make sure you have React 18+ and Bootstrap 5 CSS loaded:

npm install react react-dom bootstrap

// In your app entry point
import 'bootstrap/dist/css/bootstrap.min.css'

CSS Imports

DatePicker requires a small CSS file for its popover calendar layout. Import it once in your app (e.g., in your root component or entry point):

// Recommended — uses the package exports map (works with Vite, webpack 5+, Turbopack, Rollup)
import 'react-bootstrap-plugins/css/plugins.css'

This resolves to dist/css/plugins.css via the package’s exports map. No additional configuration is needed for modern bundlers.

Backward compatibility: The old path react-bootstrap-plugins/css/datepicker.css still works — it points to the same file. Prefer the new plugins.css path for new code.

Troubleshooting CSS import issues

If your bundler reports “Cannot find module” or fails to resolve the CSS import:

Ensure you’re on the latest version — prior versions may have had a packaging issue with nested CSS directories.
```
pnpm update react-bootstrap-plugins
```
For older webpack (v4) — you may need to use the full path if your version doesn’t support the exports field.
```
import 'react-bootstrap-plugins/dist/css/plugins.css'
```
For Next.js — add the package to transpilePackages in next.config.mjs if not already present.
```
transpilePackages: ['react-bootstrap-plugins']
```
For TypeScript — if you get a type error on the CSS import, add a declaration file (most projects already have this for CSS modules).
```
// src/types/css.d.ts
declare module '*.css' { const content: string; export default content }
```

Import Patterns

All patterns are tree-shakeable. Your bundler will only include the code you actually import.

// Single component — smallest bundle (named import)
import { DatePicker } from 'react-bootstrap-plugins/DatePicker'
import { SearchSelect } from 'react-bootstrap-plugins/SearchSelect'
import { Label } from 'react-bootstrap-plugins/Label'
import { TableLoading } from 'react-bootstrap-plugins/TableLoading'
import { AutoTextarea } from 'react-bootstrap-plugins/AutoTextarea'
import { NavPills } from 'react-bootstrap-plugins/NavPills'
import { InputCurrency } from 'react-bootstrap-plugins/InputCurrency'
import { ListGroup } from 'react-bootstrap-plugins/ListGroup'
import { FormRow } from 'react-bootstrap-plugins/FormRow'
import { ConfirmDialog } from 'react-bootstrap-plugins/ConfirmDialog'
import { Stepper } from 'react-bootstrap-plugins/Stepper'

// Multiple named — barrel, tree-shaken
import { DatePicker, SearchSelect, Label, TableLoading, AutoTextarea, NavPills, InputCurrency, ListGroup, FormRow } from 'react-bootstrap-plugins'

// CSS (required for DatePicker and NavPills badges)
import 'react-bootstrap-plugins/css/plugins.css'

All components use named exports — from their individual entry point or the barrel. CJS consumers: const { DatePicker } = require('react-bootstrap-plugins/DatePicker').

Dark Mode

All components respect Bootstrap 5’s dark mode. Set data-bs-theme="dark" on any parent element:

<html data-bs-theme="dark">
  <!-- DatePicker popover, dropdown, and all styling adapt automatically -->
</html>

Or toggle dynamically:

function App() {
  const [theme, setTheme] = useState('light')

  return (
    <div data-bs-theme={theme}>
      <DatePicker value={date} onChange={handleDate} />
    </div>
  )
}

Bundle Size

Import	Approx. Size (min+gzip)
`DatePicker` (with CSS)	~5.5 KB
`SearchSelect`	~1.2 KB
`Label`	~0.3 KB
`TableLoading`	~0.2 KB
`AutoTextarea`	~0.4 KB
`NavPills`	~0.5 KB
`InputCurrency`	~0.6 KB
`ListGroup`	~0.6 KB
`FormRow`	~0.3 KB
`Stepper`	~0.9 KB
All components (barrel)	~10 KB

Measured with ESM, tree-shaken, minified, gzipped. Your actual size depends on your bundler configuration.

Browser Support

Chrome 90+
Firefox 90+
Safari 15+
Edge 90+

Requires ResizeObserver (all modern browsers), CSS Grid, and CSS Custom Properties.

Security

All user content rendered as React text nodes — no raw HTML injection surfaces
No dynamic code evaluation or runtime code generation
DatePicker input is readOnly — displayed value is always the formatted date, never raw user input
Synthetic events use safe, explicit value construction
Popover content is isolated from the input DOM tree via React Portal

Report security issues to: security@allios.app

Development

# Clone and install
git clone https://github.com/allios/react-bootstrap-plugins.git
cd react-bootstrap-plugins
pnpm install

# Build
pnpm run build

# Watch mode (rebuild on changes)
pnpm run dev

Project Structure

src/
├── index.js              Barrel export
├── lib/cn.js             Internal classname utility
├── components/
│   ├── DatePicker.jsx    Date/time/datetime picker
│   ├── SearchSelect.jsx  Searchable select dropdown
│   ├── Label.jsx         Form label
│   ├── TableLoading.jsx  Table placeholder skeleton
│   ├── AutoTextarea.jsx  Auto-resizing textarea
│   ├── NavPills.jsx      Horizontal pill tab strip
│   ├── InputCurrency.tsx  Controlled currency input
│   ├── ListGroup.tsx      List-group with icons, badges, descriptions
│   ├── FormRow.tsx        Form row wrapper — label, control, hint
│   └── *.d.ts            TypeScript declarations
└── css/
    └── plugins.css

License

Bootstrap 5 — CSS framework this package integrates with
React — UI library
AlliOs — Multi-tenant SaaS ecosystem this package originated from

This site is open source. Improve this page.