Docs | Grassroot

Introduction

The headless core owns state transitions and semantic facts. Each framework adapter turns those facts into its native component shape.

Install

Pick the component from the registry, then keep its source in your app.

pnpm dlx grassroot init
pnpm dlx grassroot add ui/button ui/select ui/data-table

/* app/globals.css */
@import "@grassroot/tokens/base.css";
@import "@grassroot/ui-core/components/button.css";

Theming

Set a theme on the document root. Six tokens give a useful minimum; the rest resolve from the base contract.

[data-theme="custom"] {
  --surface-canvas: #0b0f14;
  --surface-card: #131a22;
  --text-heading: #e6edf3;
  --text-body: #9fb0c0;
  --accent: #4cc38a;
  --border-strong: #24313d;
}

Parity

The repository checks behaviour, DOM, accessibility, keyboard interaction, SSR, hydration, types, contracts, theme resolution and visual output.

CLI

Vendor adapters into the app and inspect the active token contract without guessing.

npx grassroot init --framework vue
npx grassroot add ui/button ui/select ui/data-table
npx grassroot doctor

MCP

The MCP server exposes the same generated contract data as the site: props, events, slots and accessibility requirements.