Beansv0.8.0

Quick start

Beans is not a dependency. You copy the components and styles into your project and make them yours, the way shadcn/ui works.

1. Copy the styles

Copy styles/ (tokens, reset, objects and component CSS) from packages/beans/src into your project and import main.css once, before any other stylesheet. It declares the cascade layer order. Tokens are yours to edit; components only read them.

layout.tsx
import "./styles/main.css";

2. Copy the components you need

Each component is a folder under components/ with its React file and a matching CSS file in styles/components/. Copy the ones you use, then change them freely. There is no package to update.

app.tsx
import { CircleDashedIcon } from "@phosphor-icons/react";
import { Button } from "./components/button";
import { Icon } from "./components/icon";

export function Example() {
  return (
    <Button variant="primary" iconStart={<Icon icon={CircleDashedIcon} />}>
      New project
    </Button>
  );
}

Dependencies

  • React 18 or 19.
  • @base-ui/react for the interactive components.
  • Phosphor icons (@phosphor-icons/react).

Theming

Colors follow the operating system. Set data-theme="light" or data-theme="dark" on the root element to force one.