@clarityos/blocks

Higher-order UI blocks built on top of @clarityos/ui.

Start Here

For the full Next.js consumer setup and agent instructions, use docs/consumer/CONSUMER_SETUP.md.

Install

npm install @clarityos/blocks @clarityos/ui @clarityos/tokens @clarityos/tailwind-preset

Usage

import { Hero } from "@clarityos/blocks/hero";

export function Example() {
  return <Hero eyebrow="Clarity OS" title="Build faster" />;
}

Notes

• Blocks are the preferred layer for section-level composition.
• Consumer apps should still import @clarityos/tokens/tokens.css once in the app shell.
• Tailwind 4 apps should also import @clarityos/tailwind-preset/theme.css.
• Tailwind source registration needs to include the installed @clarityos/blocks package output.