Boobstrap
CSS-first. Behavior optional.

Look good.Ship fast.

Boobstrap gives you responsive layouts, polished components, and practical utilities without owning your application. Start with CSS, then bring your own JavaScript—or use our optional Boobstrap JS, Alpine, and React integrations.

npm install @boobstrap/boobstrap
Read the docs Open playground

View @boobstrap/boobstrap on npm Download starter ZIP

Live component composition CSS
Studio
New workspace

Everything you need.
Nothing you don’t.

Responsive by default and shaped by semantic tokens.

Create project View components

Semantic tokens

Change one value. Update the system.

Responsive grid

Compose confidently at every size.

Ready to ship. Your interface is looking good.
CSS-onlyfoundation
0runtime dependencies
12-columnresponsive grid
MITopen source
A practical foundation

Use the whole system.
Or only what you need.

Boobstrap stays close to the platform: semantic HTML, predictable classes, customizable CSS variables, and optional behavior that never locks you into a runtime.

01

CSS comes first

Layouts, typography, forms, cards, alerts, buttons, and utilities work without JavaScript.

Explore the foundation 02

Tokens make it yours

Customize color, type, spacing, radius, elevation, containers, and motion through semantic variables.

Browse design tokens 03

Built on native semantics

Visible focus, reduced-motion safeguards, accessible color foundations, and guidance for correct markup.

Read accessibility guidance
Copy-ready components

Start with something polished.

Browse all documentation
PrimarySecondary

Buttons

Variants, sizes, icons, groups, split actions, and loading states.
Project briefUpdated just now

Cards

Flexible surfaces for content, metadata, and actions.
you@example.com

Forms

Native, labeled controls with validation and help-text guidance.
Changes saved

Alerts

Clear status messaging with appropriate semantic roles.
BrandDocs   About

Navigation

Responsive headers composed from predictable layout utilities.

Responsive layouts

Mobile-first grids that preserve meaningful source order.
Your stack, your choice

Add behavior only when you need it.

Every layer follows the same markup and accessibility contract. Pick one behavior owner for an interactive component—or keep the page entirely CSS-only.

Compare behavior layers
Foundation

CSS only

Complete visual system. No runtime required.

import "boobstrap.css" Official

Boobstrap JS

Small dependency-free controllers for interactive state.

initBoobstrap() Official adapter

Alpine.js

Reusable providers and bindings for Alpine-owned state.

x-data="bsDropdown" Official adapter

React

SSR-safe headless hooks with consumer-owned markup.

useDropdown()
Skip the blank canvas

Start with a working project.

Download a minimal Vite starter with npm imports, responsive composition, theme-token overrides, components, inline SVG icons, and a production validation check.

Download starter ZIP View setup guide
boobstrap-starter
▾ src    main.js    styles.css index.html package.json scripts/validate.mjs