# 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. Canonical: https://www.shadcndesign.com/docs/ds-manager-controls 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". 1. Open the component, for example **Select**. 2. Pick the size you want to change in the **Size** menu at the top of the Style tab. 3. 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](/docs/ds-manager-publish). The [design agent](/docs/ds-manager-agent) can change control heights and focus too. Ask it, for example, to make every default control 40px tall.