Radius
Corner radius tokens keep rounding consistent across components. The whole scale derives from a single --radius value, so changing one variable retunes every corner in the system.
Radius Scale + Tokens
Defined in app/globals.css as multiples of --radius. Use the Tailwind class — prefer the named scale over an arbitrary value.
| Token | Tailwind | Multiplier | Preview |
|---|---|---|---|
none | rounded-none | 0 | |
sm | rounded-sm | 0.6× | |
md | rounded-md | 0.8× | |
lg | rounded-lg | 1× (base) | |
xl | rounded-xl | 1.4× | |
2xl | rounded-2xl | 1.8× | |
3xl | rounded-3xl | 2.2× | |
4xl | rounded-4xl | 2.6× | |
full | rounded-full | 9999px |
Usage Guidelines
Which token to use is defined at the component level — refer back here for the available scale.
When in doubt, use rounded-lg
rounded-lg maps directly to the base --radius value and is the default for cards, inputs, and most containers.
Scale with size
Larger elements generally read better with a larger radius — step up the scale (xl, 2xl, …) for bigger surfaces like dialogs and hero cards, and down (sm) for small, dense controls like badges and chips.
Fully round for pills
Use rounded-full for pill-shaped controls — buttons, avatars, and badges that should stay circular or capsule-shaped regardless of size.