Scope
Behive Tech
The component library behind every Behive product, built to the Material Design standards.
@behivetech/* · 37 components
Atoms 21
A small status label with semantic color variants.
A flexible button component with variants, sizes, loading and disabled states.
A surface container with configurable padding and an optional header (icon + title + an `action` slot).
A bare checkbox control (built on Radix's `Checkbox`) — the Radix checkbox button is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome.
A `Card` docked to one edge of the viewport as a slide-in panel, built on [Radix `Dialog`](https://www.radix-ui.com/primitives/docs/components/dialog) for focus trapping, Escape-to-close, and outside-click-to-close. It has no opinion on what goes inside the panel — an optional `title` renders a header with a close button, otherwise just the `children` are shown.
A trigger that opens a list of selectable items, built on Radix's DropdownMenu for focus management, keyboard navigation and close on outside click or Escape.
A hand-authored, stroke-based SVG icon set behind a single `Icon` component — the same idea as `@ant-design/icons`/`@mui/icons-material`, but self-contained (no new dependency). Icons use `stroke="currentColor"`, so they inherit color from whatever text color is in scope.
A `Card` centered in the viewport with a dimmed backdrop that blocks interaction with the rest of the page, built on [Radix `Dialog`](https://www.radix-ui.com/primitives/docs/components/dialog) for focus trapping, Escape-to-close, and outside-click-to-close. It has no opinion on what goes inside the panel — an optional `title` renders a header with a close button, otherwise just the `children` are shown.
A single navigation link with an optional leading icon and active state. The `active` modifier is applied on the component's own root element (per BEM), so it can be dropped into any nav/sidebar layout.
Formatted US dollars from an integer amount of cents, rendered in a data element with a plain decimal value, in three sizes.
A QR code drawn as inline SVG for any value: one white plate and one path of black modules, rendered synchronously so it works in server components and prints crisply at any size.
A bare select control (built on Radix's `Select`) — the Radix trigger button is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome.
A dumb, styled sidebar shell — sticky, full-height, scrollable flex container. It renders an `<aside>` and applies no internal structure; the consumer is responsible for composing whatever goes inside (logo, nav, `NavItem`s, etc.).
A loading spinner with size variants and accessible labeling.
A label over a large value, for dashboards and summary rows — with an optional prefix (a currency sign) and suffix (a unit) around the value.
A bare data table: describe `columns` once (a `title` plus a `dataIndex` or a custom `render`), pass `data`, get a `<table>` back. No sorting, pagination or empty state — add those around it.
A bare text input — the native `<input>` is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome. Works standalone too — not every input needs the full form suite.
A bare multi-line text input — the native `<textarea>` is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome. Works standalone too — not every textarea needs the full form suite.
A toast viewport to mount once, anywhere in the app; `showToast()` from anywhere then renders a dismissible, auto-expiring Radix toast in it.
A bare toggle/switch control (built on Radix's `Switch`) — the Radix switch button is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome.
Names a control on hover and on keyboard focus, built on [`@radix-ui/react-tooltip`](https://www.radix-ui.com/primitives/docs/components/tooltip).
Molecules 6
A `Modal` pre-wired with a message and confirm/cancel actions, for "are you sure?" moments such as confirming a delete.
A generic centered placeholder for empty lists, grids, or search results: an optional icon, a description, and an optional action. Modeled on AntD's `Empty` — reusable anywhere something has nothing to show yet.
A drag-and-drop target with a click-to-browse fallback that reports the chosen `File` objects through `onFiles` — no upload, preview or validation of its own.
A card with an image on top and a title, subtitle and meta row below, for artwork lists, artist tiles and booking previews. It composes `atoms.card` with no padding, so fill, border and corners are Card's.
A printable card with a title, blurb, QR code, the printed address and a footer: it fills its container on screen and prints at exactly 4 x 6 in.
A TipTap rich text editor with a toolbar (bold, italic, headings 2 and 3, bulleted and numbered lists, quote, link, image), plus `RichText`, the renderer for the HTML it stores, with print-friendly prose styles.
Organisms 4
A responsive masonry image grid that opens a swipeable, keyboard-navigable lightbox. Tiles keep each image's ratio, captions show in the lightbox only, and the lightbox is a fullscreen `Modal`.
A full-width hero section: a background image behind a headline, subtext and call-to-action links, aligned left, centre or right.
Site footer with a brand, grouped navigation links, free content and a legal line; the groups stack on small screens and sit in columns from the medium breakpoint.
A site header with a brand slot, navigation links and optional actions; once the header itself is at least `64rem` wide the links sit inline, and narrower a menu button opens them in a right-hand Drawer.
Templates 3
A document wrapper that sets the page `<title>` and `<meta name="description">` and wraps its children in one root element — no header, footer or layout regions.
A printable book on US Letter pages: an optional cover, an optional contents page that links to each section, then one section per page. It is dumb on purpose: it lays out what it is given and knows nothing about where the text comes from.
A dumb CSS Grid skeleton with sidebar, topbar, and content regions. It has no opinion on what the sidebar or topbar contain — the elements passed in are responsible for their own `grid-area: sidebar` / `grid-area: topbar` placement (e.g. via `@behivetech/atoms.sidebar`).
Forms 3
Dumb wrapper that provides label + hint/error + required-marker layout around any form control (`Checkbox`, `Input`, `Textarea`, `Select`, `Toggle`, ...) — the same job AntD's `Form.Item` does. The control itself owns none of this chrome; it just needs an `id` matching `htmlFor`.
`FormField` with its react-hook-form wiring already done — the control's value/onChange/onBlur/ref, the label association, and the error message.
The single place `react-hook-form` is imported directly in this repo. Everything else should import form state/control from here instead of `react-hook-form` — that keeps the underlying library swappable from one spot later.