Introduction

What this library is and how it is organised.

This is a component library with a registry behind it. Components are not hand-written documentation pages: each one is a record in the Component Registry, and every page you see — the homepage, family pages, component pages, search — is generated from that registry on request.

How components get here

1. Paste a React component into the Workbench.
2. Analyze parses it and reports its dependencies, assets, CSS and Tailwind requirements, a suggested type, family and tags.
3. Preview renders it for real, inside an isolated sandbox, at mobile, tablet and desktop widths.
4. Save Draft, mark it Ready, then Publish.

After publishing, the component appears in the library, in search and in its family. Nothing else has to be edited.

Families and types

A family groups components by purpose (Heroes, Buttons, Pricing…). Families are data: create one in the admin and it shows up in the navigation immediately.

A type describes scale: primitive, component, section, layout or effect.

Using a component

Open a component page, install its npm dependencies with the generated command, and copy the source into your project. File paths are relative to your source root, the @/ alias.