Boobstrap v0.7.0

Build with Boobstrap.

A CSS-first framework for responsive layouts, polished components, practical utilities, and optional behavior. Bring your own JavaScript, use Boobstrap's dependency-free controllers, or add an official Alpine, React, or Vue adapter.

Download starter Open playground

1140 classes 109 tokens 0 JavaScript dependencies

What ships in the framework

CSS foundations

A small reset, semantic theme tokens, responsive containers, a 12-column grid, typography, and composable utilities.

UI components

Buttons, cards, badges, alerts, banners, form controls, code windows, and interaction presentation classes.

Optional behavior

Dependency-free controllers plus official Alpine.js, React, and Vue adapters for stateful components.

Copy-ready docs

Every visual example is paired with source and can be inspected independently in light or dark mode.

Your first component

Import the stylesheet once, then compose semantic HTML with namespaced bs- classes.

Ready to ship

A composed interface

Tokens, components, and utilities work together without changing the meaning of your markup.

Explore buttons

HTML · First component

<article class="bs-card bs-card-raised">
  <div class="bs-card-body">
    <span class="bs-badge bs-badge-primary">Ready to ship</span>
    <h2 class="bs-card-title bs-mt-4">A composed interface</h2>
    <p class="bs-card-text bs-mb-4">Tokens, components, and utilities work together.</p>
    <a class="bs-btn bs-btn-primary bs-btn-sm" href="/docs">Explore the docs</a>
  </div>
</article>

Documentation

Browse by topic

Each topic now has its own focused route, local page outline, rendered examples, copy-ready source, and guidance. Start with a foundation or jump directly to a component.

01

Get started

IntroductionArchitecture and what is included What's new in v0.7Hardened controllers, adapter parity, CSS additions Installationnpm, pnpm, Yarn, Bun, and CDN Starter templateDownload and run a complete project Custom CSS CompilerTree-shaking, palettes, radii, and CLI ThemingModes, palettes, corners, and tokens TypeScriptBuilt-in declarations for every behavior layer

02

Foundations

Layout and gridContainers, columns, flex, and gaps LinksDefaults, emphasis, and interaction states Native HTML elementsLists, quotes, code, disclosure, and media Responsive compositionMobile-first page structure TypographyType scale and text utilities

03

Components

AccordionAccessible grouped disclosures across every adapter AlertsContextual messages and status AvatarsImages, initials, presence, and groups BadgesStatus and metadata labels BannersFull-width contextual page notices ButtonsVariants, groups, icons, and loading CardsFlexible content surfaces Code windowsTerminal and source presentation DialogsModal workflows, forms, sizing, and scrolling DrawersStart/end panels with fixed regions and scrolling bodies Empty statesExplanations and recovery actions FormsLabeled inputs and controls CheckboxChecks, descriptions, inline options, and validation Date and timeBrowser-native picker types File, range, and colorNative upload, slider, and picker controls Input groups and iconsPrefixes, suffixes, actions, and markers InputsLabels, sizes, states, and feedback Native selectsStyled semantic selection controls One-time passwordComplete six-digit verification input Passwords and masksReveal actions and formatted entry RadioMutually exclusive choices and invalid states Searchable selectBoobstrap JS, Alpine, React, and Vue SwitchOn/off toggle switches and confirmations TextareaMulti-line text controls and rows IconsLucide integration and icon sizing NavigationHeaders, vertical nav, breadcrumbs, and page links ProgressDeterminate and indeterminate status Reference lists and checklistsDense values and completion steps SidebarApplication shells, menus, drawers, and collapse modes SkeletonsMotion-safe, content-shaped loading placeholders TablesResponsive structured data DataTables.netInstall and run the complete DataTables 3 integration PaginationAccessible page controls and sizes Table fundamentalsSemantics, overflow, sorting, and empty states Table stylesStripes, hover rows, borders, and density ToastsTemporary status notifications

04

Interactivity

Behavior layersCSS, Boobstrap JS, Alpine, React, and Vue CollapseExpandable content regions Command paletteKeyboard-first search and action modals DropdownKeyboard-accessible action menus React adapterSSR-safe headless hooks Svelte adapterSvelte 5 runes and action directives TabsRoving focus and synchronized panels Tooltips and popoversAutomatically positioned contextual feedback Vue adapterSSR-safe headless composables

05

Reference

AccessibilitySemantics, focus, motion, and contrast All classesSearch the installed stylesheet Design tokensTheme values and customization UtilitiesLayout, spacing, and typography