Imports

Take everything, take one Bit, or copy the files into a project with no build step. Every route uses the same layers and the same tokens.

Choose an entry

Pick the smallest entry that covers the page. The Bits themselves do not change between routes.

Entry	Holds	Needs a bundler
`@bitsyui/core`	Foundation and every Bit	Yes, for the `@import`
`@bitsyui/core/flat/bitsy.css`	Foundation and every Bit in one file	No
`@bitsyui/core/flat/core.css`	Foundation only	No
`@bitsyui/core/flat/bits/<bit>.css`	One Bit, already in the `bitsy.bits` layer	No

The flat files contain no @import and no bare specifiers, so a plain <link> tag works. Each file declares the layer order itself, so the order of the tags does not matter.

Import one Bit

Pair the foundation with only the Bits the page uses.

With a bundler

/* app.css */
@import "@bitsyui/core/flat/core.css";
@import "@bitsyui/core/flat/bits/button.css";
@import "@bitsyui/core/flat/bits/text-field.css";

With link tags

<link rel="stylesheet" href="/bitsy/core.css">
<link rel="stylesheet" href="/bitsy/bits/button.css">
<link rel="stylesheet" href="/bitsy/bits/text-field.css">

Use flat/core.css with per-Bit files, never with flat/bitsy.css, which already contains the Bits. Token overrides go after the Bitsy files, as in Installation.

Vendor the files with no build step

Copy the CSS into your project and link it. Nothing needs to be installed on the machine that serves the site.

Install the package once to get the files, or copy them from the repository: pnpm add @bitsyui/core.
Copy node_modules/@bitsyui/core/flat/core.css to public/bitsy/core.css.
Copy each Bit you use from flat/bits/<bit>.css to public/bitsy/bits/<bit>.css.
Link the files in your HTML, then add your token overrides in a stylesheet after them.
Commit the copies. Update them by copying again when you upgrade.

mkdir -p public/bitsy/bits
cp node_modules/@bitsyui/core/flat/core.css public/bitsy/core.css
cp node_modules/@bitsyui/core/flat/bits/{button,text-field}.css public/bitsy/bits/

Prefer a command? npx @bitsyui/cli add button text-field copies each Bit's source CSS into bitsy/bits/<bit>/, and --list shows every Bit. Agents can read llms.txt for the same steps and a link to each Bit's Guide.

Bits with a script

Menu and Tabs add keyboard behavior with a small script. Dialog and the form Bits need none.

The flat files carry CSS only. Copy the script with bitsy add menu or bitsy add tabs, then load it as a module and call init() once.

<script type="module">
  import { init } from "/bitsy/bits/menu/index.js";
  init();
</script>