Good UI.
Two files away.

bootstrapcn brings the clean visual style of shadcn/ui to Bootstrap, PHP and plain HTML. Add local CSS and JavaScript files, write familiar markup, and make it yours.

MIT licensed 53 example groups 10 palettes

1. Copy the assets

Download a release and copy its dist/ folder into your public assets directory. Include the stylesheet and module script in your page:

<link rel="stylesheet" href="/assets/bootstrapcn/bootstrapcn.css">
<script type="module" src="/assets/bootstrapcn/bootstrapcn.js"></script>

Bootstrap and its JavaScript dependencies are already bundled. Load these files once per page. Serve them through HTTP or HTTPS with a JavaScript MIME type; module scripts do not run from file://. Adjust URLs for your public root or subdirectory.

Your PHP project needs no npm, React, Tailwind or compilation. The files make no runtime CDN requests.

2. Use HTML components

Open any component in the gallery, expand View HTML, and copy its markup. Keep IDs unique when using more than one copy.

<button type="button" class="sc-button"
        data-sc-toast="Changes saved"
        data-sc-description="Your settings are up to date.">
  Show notification
</button>

The stable markup API uses .sc-* classes, data-sc-* attributes and --sc-* CSS variables. Bootstrap components retain their Bootstrap 6 classes and data-bs-* attributes. CSS alone supports static components; use the module script for interactive controls.

3. Choose your theme

Ten palettes work with light, dark or system mode: neutral, slate, stone, zinc, blue, green, rose, orange, violet and teal. Preferences persist in the browser and synchronize across tabs.

<html lang="en" data-sc-palette="violet" data-sc-theme="system">

Set an initial preference on the HTML element. A previously stored choice takes precedence. To customize the design, load your CSS after the library:

:root {
  --sc-radius: .75rem;
}
[data-bs-theme="light"] {
  --sc-primary: #6d28d9;
  --sc-primary-foreground: white;
}

Other tokens include --sc-background, --sc-foreground, --sc-muted, --sc-muted-foreground, --sc-border, --sc-destructive and --sc-ring.

JavaScript API

<script type="module">
  import { BootstrapCN, Dialog } from '/assets/bootstrapcn/bootstrapcn.js';

  BootstrapCN.setPalette('blue');
  BootstrapCN.setTheme('dark');
  BootstrapCN.toast('Saved', { description: 'Your changes are ready.' });

  // After inserting component HTML:
  BootstrapCN.init(document.querySelector('#new-content'));

  // Before removing an initialized subtree:
  BootstrapCN.dispose(document.querySelector('#old-content'));
</script>

Bootstrap plugins are exported from the same file. Use ESM imports for reliable execution ordering. window.BootstrapCN is available once the module executes.

PHP integration

Use normal forms with named controls. The PHP starter demonstrates POST validation, session-based CSRF protection, escaped output and retained field values.

php -S 127.0.0.1:8080 -t .
# Open http://127.0.0.1:8080/examples/starter.php

GitHub Pages serves the gallery and documentation as static files. Run the PHP starter on a PHP server. It validates submissions without storing them; add your database handler as needed.

Inline calendars should bind a hidden ISO field outside their rendered container with data-sc-date-input="field-id". OTP posts one complete code string; unchecked checkboxes are omitted from POST. Validate all values on the server. See the component contracts for detailed behavior.

Component coverage

The gallery contains 53 example groups representing 66 named patterns: forms, dialogs, menus, tables, calendars, OTP, charts, command search, sidebars, resizable panels, content and messaging primitives. The coverage map records each name and example ID.

These are HTML/Bootstrap implementations of the patterns. The chart currently supports one nonnegative bar series. The data table filters, sorts, selects and paginates rows already rendered by your application. Message and attachment components need your application backend. Check each example's documented behavior before integrating it.

Built to be contributed to

Bug reports, documentation, accessibility fixes, component examples and code improvements are welcome.

git clone https://github.com/soumit101/bootstrapcn.git
cd bootstrapcn
npm ci
npm run serve

npm run build
npm test
npm run check:generated
npx playwright install chromium --with-deps
npm run test:browser

Read CONTRIBUTING.md before opening a pull request. Make changes in src/, rebuild the committed distribution, and include a focused description of what changed and how you tested it.

Support & license

bootstrapcn is MIT licensed and independent of Bootstrap and shadcn/ui. Third-party licenses ship with the distribution. Report reproducible bugs through GitHub Issues; report vulnerabilities through private security reporting.