Behive Tech Component Registry
The component library behind every Behive product, built to the Material Design standards — docs from source, live examples, versions via Changesets.
Scopes
Behive Tech
@behivetechThe component library behind every Behive product, built to the Material Design standards.
37 components
Browse Behive TechLatest releases
@behivetech/organisms.hero-bannerv0.8.30e4857f: Ship the `.meta.ts`, `.schema.ts` and `.migrations.ts` modules in the package `files`, so the published `index.ts` resolves its imports.
@behivetech/atoms.cardv0.6.000e81c9: Drawer and Modal now pull in Card's stylesheet through the package (`@behivetech/atoms.card/card.module.scss`) instead of a monorepo-relative path, so the shipped `.module.scss` source compiles outside the monorepo. Card exports `./card.module.scss` for this. The published `dist/index.css` is unchanged.
@behivetech/atoms.buttonv0.5.0b356876: `Button`'s `ghost` label colour is now read from the `--button-label-color` custom property, defaulting to `primary` so an existing ghost button renders as before. A raised surface sets it on its own class when `primary` is under 4.5:1 (4.02:1 on the-behive's Dark `surface-container-high`; the default tokens give 8.43:1). `ConfirmDialog` sets it to `secondary` for Cancel: 12.87:1 in Dark and 5.40:1 in Light with the-behive's tokens. Inside a `Modal` or `Drawer`, set the property through their `className` or on a class inside the body, because their content portals to `body`.
@behivetech/atoms.checkboxv0.5.0280ec88: Add an `invalid` prop: it adds the `--invalid` modifier and sets `aria-invalid`. A direct `aria-invalid` also turns the modifier on. Styling moves from the attribute selector to the modifier.
@behivetech/atoms.nav-itemv0.5.0ee25c3c: Add an `asChild` prop (Radix `Slot`, as `Button` has) so a router link such as Next's `Link` can render the item. `active` now also sets `aria-current="page"` (a caller's own `aria-current` wins), and the active pill comes from the `--active` modifier only; any passed `aria-current` other than `false` also turns the modifier on, so the attribute and the modifier never disagree. Adds `@radix-ui/react-slot` as a peer dependency.
@behivetech/atoms.selectv0.5.0280ec88: Add an `invalid` prop and style `invalid`, `disabled` and option `disabled` through `--invalid` / `--disabled` modifiers. Options are now rendered by an internal `SelectItem` block (`BHT__SelectItem`), so the item classes moved from `BHT__Select__item*` to `BHT__SelectItem`.
How it works
The folder tree is the registry
registry/<scope>/<category>/<name> becomes @<scope>/<category>.<name>. Ownership, docs, props and versions all derive from files in the repo — nothing to keep in sync.
Scopes keep teams apart
Each folder under registry/ is an npm scope: every package inside it is @<scope>/<category>.<name>. A scope.json names the team and its tagline; who may change it is a matter for git, not for the site.
Docs generated, not written twice
react-docgen reads each component's TypeScript for the props table; the exports of each `*.example.tsx` run live, editable in place; the README is rendered with its snippets running.
Versioned and published
Changesets bump semver and write the changelog; pnpm release publishes to npmjs by default, or to any registry your .npmrc points at. The site shows what each scope shipped, and when.
Add a component to your scope
Three commands from an empty folder to a documented, versioned package:
1pnpm gen # scope → category → name; scaffolds registry/<scope>/…2pnpm changeset # describe the change; Changesets bumps the version3pnpm release # build + publish to your npm registry (npmjs by default)