Quick start · Bones

Two packages: tokens (plain CSS) and components (React 19 or newer). Add the icon adapter, @usebones/icons, if you need icons.

pnpm add @usebones/react @usebones/tokens

Import styles once

Tokens first, then component styles. In a Next.js app this goes in the root layout; anywhere else, your top-level entry file.

import "@usebones/tokens/index.css";
import "@usebones/react/styles.css";

Keep the .css on the end. TypeScript 7 rejects imports that exist only for their side effects unless the extension is spelled out.

Use components

import { Button, Switch } from "@usebones/react";

export function Example() {
  return (
    <>
      <Button variant="secondary">Save draft</Button>
      <Switch defaultChecked />
    </>
  );
}

Server components

Interactive components are client components (they carry the directive themselves), so they drop straight into server-rendered apps: import the styles in the server root layout, and keep ToastProvider and other providers inside a client boundary.

Dark mode and radius

Both are attributes on <html> (or any subtree), no JavaScript required:

<html data-theme="dark" data-radius="pill">

Using Tailwind v4?

Import @usebones/tokens/tailwind.css instead of index.css. Same tokens, plus utilities like bg-ub-accent and ease-ub-spring. The file uses @theme inline, so it needs v4; on v3, import index.css and reference the tokens directly. Tailwind is supported, never required.

Make it yours in Theming, read how the two sizes work in Sizes, or start with the Button.