Components

The full Builtwell wordmark, drawn in currentColor. It fills the width it is given, so size it with its container.

The BW monogram, for tight spaces: navbars, avatars, favicons. It fills its box, so the container sets the size.

Switches between light and dark with a circular reveal from the button, using the View Transitions API where the browser has it.

The pill button for every action. Six variants, four text sizes and four icon sizes, on Base UI's Button so it can render as a link.

Joins buttons, inputs and selects into one pill, squaring the inner corners. Nest groups to space them.

A button that stays pressed. For one on/off setting, such as bold, where a checkbox would feel like a form.

A row of toggles that share a value: one at a time by default, or several with multiple. Spacing 0 joins them into a segmented control.

The single-line text field: a soft filled pill with a ring on focus and a red ring when invalid.

An input or textarea with addons inside the same pill: icons, text, buttons, at either end or above and below.

Multi-line text that grows with its content (field-sizing: content), filled like the input.

Pick one from a short list. Base UI Select: pass items to the root so the trigger can show the label, and the popup opens over the trigger.

A text input that filters a list as you type. Single choice with ComboboxInput, several with chips.

On or off, or one of several that can all be on. Base UI's Checkbox with a check indicator.

Exactly one of a few options, all visible at once.

A value, or a range with two thumbs, along a track. Base UI Slider; values are arrays.

The layout around a control: label, description, error. FieldSet and FieldGroup stack them; orientation sets the row.

A plain label, text-sm medium. Inside forms, reach for FieldLabel, which is this plus field states.

A modal over a blurred backdrop, for a short task that needs the whole of someone's attention. Closes on Escape and outside click.

Rich content anchored to a trigger, opened on click. Not modal, so the page stays usable.

A short label on hover or focus, dark with an arrow. Each Tooltip brings its own provider, with no delay.

A preview of what a link leads to, on hover. Base UI's PreviewCard.

A list of actions or options from a button. Items, checkboxes, radios, labels and submenus, on a blurred dark popup.

A searchable list of commands on cmdk. Inline, or as a palette in a dialog with CommandDialog.

A small label for status or category. Renders a span, or anything via render.

A surface for one thing: header with title, description and an action, content, footer. A leading image bleeds to the edges.

A callout in the flow of the page: an icon, a title, a description and an optional action.

Semantic table parts with row hover and a scrolling container. For data, not layout.

Switch between views of the same thing without leaving the page. A muted pill, or a line.

Stacked questions that open to their answers. One open at a time unless multiple is set.

Show and hide one region. Unstyled: the trigger and panel look like whatever you render.

A 1px rule in the border colour, horizontal or vertical.

A pulsing block that holds a place while content loads. Size it like what is coming.

Lucide's Loader2, spinning, with role="status" and a Loading label.

A scrolling region with a thin custom scrollbar that shows on hover, on Base UI ScrollArea.

A row of slides with previous and next buttons, on Embla. Swipe, drag or use the arrow keys.

Click an image to see it full screen over a blurred backdrop, on react-medium-image-zoom.

The scrolling log of a chat. Sticks to the bottom as messages stream in, with a button to jump back down.

One turn in a chat. The user's sits right in a bubble; the assistant's renders Markdown with Streamdown and can carry actions.

The box people type into. A form around an input group: a growing textarea, a footer for tools, and a submit that turns into stop while the answer streams.

Starter prompts as outline pills in a row that scrolls sideways. Clicking one hands its text to onClick.

A tool call in the chat, collapsed to its name and status. Opens to show the input and the result as JSON.

import { Button } from "@repo/design-system/components/ui/button";

export function Cta() {
  return <Button>Start a project</Button>;
}

Code highlighted with Shiki in light and dark, with a header for a filename and a copy button. The usage blocks on these pages are this.

The spinning radial loader the chat shows while the model thinks. Sized in pixels.

Pick block categories as chips, each labelled with its count. A multiple combobox with its labels and sorting built in.