bootstrapcn
BOOTSTRAP 6 · ZERO BUILD STEP

Beautiful components.
Your PHP. Your way.

The clean, considered feel of shadcn/ui. The simplicity of Bootstrap. Drop in two files and make something yours.

Get started Explore componentsNo React. No compilation.
CSS variablesLight & darkNative HTMLSelf-hosted assets
01 / INSTALLATION

Two files. That’s it.

Copy dist/ into your PHP project's public assets directory. Bootstrap and its JavaScript dependencies are already included.

Read the integration guide ↗
your-page.php
<link rel="stylesheet"
      href="/assets/bootstrapcn/bootstrapcn.css">
<script type="module"
        src="/assets/bootstrapcn/bootstrapcn.js"></script>
Serve through PHP or HTTP · no external requests

Make it feel like you.

Ten palettes. Light, dark, or system mode. Your preference, remembered.

02 / THE BUILDING BLOCKS

Component collection

Live previews. Copyable HTML.

Button

01

Clear actions, with just the right emphasis.

Card

02

A little structure for your next big idea.

Create a project

Your next idea starts right here.

Input & Label

03

Simple fields that belong in any form.

We’ll only use this for account updates.

Textarea

04

Room for a little more context.

Plain HTML fields work with standard PHP POST requests.

Select & Combobox

05

Native selects or a keyboard-friendly menu.

Checkbox, Radio & Switch

06

Small decisions, familiar interactions.

Plan

Badge

07

A concise status, at a glance.

DefaultOutlineActiveOverdueSecondary

Avatar

08

A human touch, with text fallbacks.

AM
SLTK+3

Dialog

09

A focused moment, with native focus management.

Edit profile

Update how your name appears in this preview.

Sheet / Drawer

10

Supporting detail, one slide away.

Workspace settings

Fine-tune your workspace.

Tabs

12

Related content, neatly organized.

Account details

Manage your public profile and preferences.

Security settings

Keep your password and recovery information up to date.

Accordion

13

Progressive disclosure. No JavaScript required.

Does this work with plain PHP?
Yes. Add the CSS and module script, then render ordinary HTML from PHP.
Do I need to compile anything?
No. The dist folder contains ready-to-use assets, including Bootstrap.
Can I customize the theme?
Override the --sc-* CSS variables in your own stylesheet.

Alert

14

Useful information, without the noise.

You’re all set.

Your workspace is ready for its first project.

Toast / Notification

15

Timely feedback that stays out of the way.

Tooltip & Popover

16

A little extra explanation, when it’s needed.

Table

17

Your data, with room to breathe.

A preview of your recent invoices.
InvoiceStatusMethodAmount
INV-001PaidCredit card$250.00
INV-002PendingBank transfer$150.00
INV-003OverdueCredit card$350.00

Progress & Slider

18

Native controls, thoughtfully styled.

64%

Skeleton

19

A quiet placeholder while content loads.

Toggle

20

A pressed state, with an accessible announcement.

Empty State

22

Give an empty space a useful next step.

No projects yet

Start with something small. Make it your own.

Create your first project

Separator & Keyboard

23

Small details that bring everything together.

Workspace

A home for your ideas.

Keyboard shortcut example Ctrl + K

Alert Dialog

24

Confirm a consequential action before continuing.

Delete this draft?

This is a demonstration. No project data will be deleted.

Aspect Ratio

25

Keep media in a consistent frame.

16 : 9 media container

Attachment

26

A native file input ready for a multipart PHP form.

PDF or text. Validate file type and size on your PHP server.

Button Group

27

Related actions presented as one control.

Calendar

28

Inline date selection with a named ISO form value.

Chart

30

A theme-aware bar chart backed by an accessible data table.

Monthly signups
View chart data
MonthSignups
Jul120
Aug180
Sep150
Oct240

Collapsible

31

One disclosure, using semantic HTML.

Show project details
Website refresh

A small project with a clear next step.

Command

32

Filter actions and navigate with arrow keys or Enter.

CalendarAppearance

Context Menu

33

Right-click, or focus and press Shift+F10.

Project canvas · right-click for actions

Data Table

34

Client-side filtering, sorting, selection, and pagination.

0 selected
Alex MorganAdmin12
Sam LeeEditor3
Taylor KimViewer2
Jordan PatelEditor10
Casey JonesViewer5
Riley ChenAdmin8

Date Picker

35

Choose a single date or a range.

Display format follows the browser locale. Use getSelectedDates() for ISO values.

Direction

36

Native dir attributes support right-to-left layouts.

إعدادات الحساب

المظهر والإشعارات

Field & Validation

37

Connect labels, descriptions, and error messages.

Use your company email address.

Enter a valid email address.

Hover Card

38

Non-interactive information on hover or keyboard focus.

Input Group

39

Prefixes, suffixes, and actions around a native input.

https://

Input OTP

40

One real input supports paste, autofill, and form submission.

Enter the six-digit code sent to your email.

Item

41

Composable list content, with an optional action.

Jamie Davis

jamie@example.com

Resizable

44

Drag the divider, or focus it and use arrow keys.

Navigation

A flexible first panel.

Content

20–80% resize bounds.

Scroll Area

45

Native scrolling remains keyboard and touch accessible.

  • Project created
  • Team invited
  • Brief approved
  • Design started
  • Prototype reviewed
  • Feedback resolved
  • Development started
  • Release prepared

Spinner

47

A small loading indicator with an accessible status.

Toggle Group

48

Single or multiple pressed states within a named group.

Typography

49

A readable foundation for long-form content.

A little less, a little better.

Good interfaces help people focus on what matters.

Make the useful thing easy to find.
  • Clear hierarchy
  • Comfortable spacing
  • Thoughtful defaults

Code Block

50

Plain code, safe text rendering, and a copy action.

PHP
<?php
echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8');

Message, Bubble, Message Scroller & Marker

51

Presentation primitives for a conversation interface.

JD

Can we review the new components?

AM

Yes. The gallery is ready to explore.

Questionnaire

52

Group native form controls into a clear question.

What are you building?

Choose the option that best describes your project.

Trace

53

Expandable steps for a process or activity log.

Request received Done

The form passed initial validation.

Prepare response

Render the page with the validated values.

Complete

The response is ready to send.