Controls
Give every shadcn/ui button, input and select one height per size, so form rows line up, and set the keyboard focus style for all of them in one place.
In shadcn/ui, each control carries its own height class. A small Button is h-8, a default Input is h-9, and so on. Change one of them and the others stay where they were, so a form row stops lining up. The Controls page sets the height of every control in one place, one value per size, and sets how all of them show keyboard focus.
Open Controls in the left nav. It sits between Spacing and Icons.
Heights
The Heights panel has one field for each size: xs, sm, default and lg. Each starts at your style's own height. Type a new value in px, from 12 to 64, and every control drawn at that size follows it.
An edited height gets a dot next to its name. Click the dot to go back to the style's value. When you switch to another shadcn/ui style on the Style page, the heights you edited stay and the rest move to the new style's values.
The page header lists the four heights, for example "xs 24px · sm 32px · default 36px · lg 40px".
Follow these heights
This panel lists the 8 controls that take their height from Controls:
| Control | Sizes |
|---|---|
| Button | xs, sm, default, lg |
| Input | default |
| Input Group | default |
| Combobox | default |
| Select | sm, default |
| Native Select | sm, default |
| Toggle | sm, default, lg |
| Toggle Group | sm, default, lg |
A control that follows the Controls heights reads Follows. A control you gave its own height reads Custom with the value, for example "Custom · 36px", or "Custom · sm 30px" when the control has more than one size. Click the dot on a custom row to make it follow Controls again. Click a control's name to open its component page.
Give one control its own height
On the component page of any of the 8 controls, the Height field under Size in the Style tab shows the Controls value as a badge. Its tooltip reads "Control value · click to detach".
- Open the component, for example Select.
- Pick the size you want to change in the Size menu at the top of the Style tab.
- Click the badge in the Height field and type the new height.
That control now keeps its own height at that size and shows as Custom on the Controls page. Click the dot next to Height to attach it to Controls again.
Focus
The Focus panel sets how all 8 controls show keyboard focus:
- Shape: Ring or Outline.
- Width: how thick the ring or outline is, 0 to 8px.
- Offset: the gap between the control and its ring or outline, 0 to 8px.
- Strength: how much of the ring color shows, 0 to 100%.
Each value starts at your style's own look and gets a dot when you change it.
The canvas
The canvas draws every control at every size side by side, on dashed guides at each height. A control that doesn't line up stands out next to the ones that do. The In a row section shows a form row at the default size, and the Focus section shows the focus style on real controls.
Use the Docs and Preview switch above the canvas to see the cards demo from the Style page instead.
What ships
Heights and focus land in the components themselves. When you publish and install, each control gets plain Tailwind classes such as h-10 or focus-visible:ring-2, so your project doesn't need any extra CSS or settings for them. See Publish and install.
The design agent can change control heights and focus too. Ask it, for example, to make every default control 40px tall.