Installation
Installs the size-context lib: SizeProvider, the useSize and useTypeScale hooks, and the token maps behind both steps.
The principle
An interface reads as one product when its controls share a sizing rhythm. A button next to a select next to a tab should land on the same height.
Each size scales text, icons, and padding together.
Compact is for dense, data-heavy tools; default is the right call for everything else.
Typography scale
Type follows the ladder. Compact drops each role one notch, so a dense screen keeps the same hierarchy at a smaller size.
Compact regions
Density is a region decision, not a per-control one. Wrap the region in aSizeProvider and everything inside follows — menus included, since React context crosses portals.
Token reference
The table, measured live: hover a control below and every number in the readout is a token from this table. Flip the step and the element re-measures under your cursor.
SizeProvider props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "default" | "compact" | — | Controlled variant — pins every control in the subtree to one step. |
| defaultSize | "default" | "compact" | "default" | Uncontrolled initial variant, switchable via useSizeContext().setSize. |
Component size prop
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "default" | "compact" | from provider | Per-component override on Button, Badge, Select, Tabs, TabsSubtle, Dropdown, DropdownMenu, CheckboxGroup, RadioGroup, InputGroup, InputCopy, InputMessage, Table, Switch, Slider, Accordion, AccordionGroup, AskUserQuestions, Card, ChatMessage, ColorPicker, ThinkingIndicator, and ThinkingSteps. Wins over the surrounding SizeProvider. |