Capsule
Put one row of controls or figures on a floating pill: live stats, a now-playing player, steppers, a search and small toggles.
import { Capsule, CapsuleLabel } from '@youj/react'
Installation & usage
The shell on its own:
npm i @youj/reactFor an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.
Each member installs the shell with it.
Capsules are for controls that float over what they control: a toolbar over a canvas, a dock over a timeline, vitals in the corner of an editor. Each one is a single row on its own surface, the height of a control plus a small inset, so capsules line up with each other and with buttons and fields of the same size. Stat Pill, Capsule Stepper, Capsule Search and Capsule Toggle are made on it.
Description
Each capsule type in a row: a tool toggle, a stepper, a stat pill, a search, and a bare capsule holding a button.
Capsule holds any controls you put in it, and CapsuleLabel gives a control a short name. Its height is the control height plus a 4px inset, so the controls inside sit evenly within its rounded ends and the capsule lines up with buttons and fields of its size.
import { Button, Capsule, CapsuleLabel } from '@youj/react'
<Capsule>
<CapsuleLabel>Export</CapsuleLabel>
<Button size="sm">Render</Button>
</Capsule>size="sm" makes a capsule for a dense toolbar.
Code
capsule-demo.tsx, the Demo story. The component itself comes from the package.
Reference
Propssize (1)
Props
| Prop | Type | |
|---|---|---|
size | 'sm' | 'default'
default 'default' | 'default' |
Other props pass through: extends ComponentProps<'div'>. | ||
StylingParts and data attributes
Styling
Every capsule carries data-capsule, and a data-slot of its own: capsule, stat-pill, capsule-player, capsule-stepper-group, capsule-search and capsule-toggle. Short names inside use capsule-label and units use capsule-unit. In Bezel a capsule is a pill lifted on a hairline, with its labels in small mono capitals. A theme with square corners keeps it square. In Classic it's a bordered rounded panel.