@bitsyui/core
One import path for tokens, theme, reset, base defaults, and the Bit styles.
Introduction
Bitsy UI is a framework-free design system: native HTML, tokens, agent-ready, and it works with any stack. One import, no build step, and a few tokens to make it yours.
The shortest credible path
The docs should make adoption obvious before they ask you to inspect architecture details.
- Install
@bitsyui/coreand import it once. - Optionally generate a starter override file with
@bitsyui/cli. - Use the docs controls to verify that appearance and typography can shift without changing structure.
pnpm add @bitsyui/core
pnpm dlx @bitsyui/cli init bitsy.css --dry-run
/* app.css */
@import "@bitsyui/core";Bits
12 Bits, each one native HTML plus a CSS file. Pick one to see its examples and its Guide.
Button
Button is the smallest action Bit in Bitsy.
Card
Card groups one self-contained piece of content into a bounded surface with an optional header, a body, and an optional footer of actions, so it reads as one unit among others.
Checkbox
Checkbox lets a person turn one independent option on or off, such as agreeing to terms, or choose any number of options from a list.
Dialog
Dialog interrupts the page with one focused task or confirmation in a modal window, keeps focus and screen-reader context inside it until it closes, and returns focus to where the person was.
Fieldset
Fieldset groups related fields under one name, such as "Shipping address" or "Notification channels", with optional group help text and a group-level error, so the group is understood as one unit.
Menu
Menu opens a short list of actions from a button, anchored to it, so a screen can offer secondary actions such as "Duplicate", "Export", and "Delete" without showing a button for each.
Radio Group
Radio Group lets a person pick exactly one option from a small set of options that are all visible at once, such as a plan, a delivery speed, or a notification frequency.
Select
Select lets a person pick one option from a list that is too long to show as radios, in a compact control that matches Text Field in size and style, such as a country, a time zone, or a role.
Switch
Switch turns one setting on or off and the change takes effect right away, such as enabling notifications or dark mode in a settings list.
Tabs
Tabs shows one of several related panels in the same space, with a row of tabs that names each panel and shows which one is active, so people can switch views without leaving the page.
Text Field
Text Field is the smallest text-entry Bit in Bitsy.
Textarea
Textarea collects one multi-line text value, such as a message, a description, or notes, with a clear label, optional supporting text, and explicit disabled, readonly, or invalid states.
What exists today
Bitsy is still intentionally small. These are the few surfaces that need to stay clear and well-related.
packages/bits
Each Bit keeps its implementation, definition, and Bitsy Guide together in one folder.
@bitsyui/cli
A narrow setup companion that generates a starter stylesheet instead of scaffolding an app.
Docs and Storybook
Docs explain adoption and customization. Storybook remains the validation surface.
How to read the docs
Stay on the shortest route for the job you are actually doing.
For adopters
Start with Setup, then review Tokens, Themes, and Typography.
Browse the Bits to see each contract with live examples.
For contributors
Use Architecture for the workspace split, then continue into README.md, AGENTS.md, and internal/ when the work touches architecture or operating rules.