🎨 ⚙️ ♿
Most component libraries make a choice for you: Material UI locks you into MD3 elevation shadows, Chakra owns your spacing scale, Ant Design assumes enterprise grey. You fight the library every time you want to deviate. Radix UI flips the script. It gives you the *mechanics* of a popover, dropdown, or modal — focus traps, keyboard escape, ARIA labels — and *nothing else*. You layer the visuals on top with Tailwind. That's the Velocity X bet.
Radix is headless. A Dialog primitive is unstyled. You compose it with your Tailwind classes:
```typescript
import * as Dialog from '@radix-ui/react-dialog';
export const Modal = () => (
{/* your content */}
);
```
shadcn/ui is the standardization layer. It copies Radix components into your codebase and wraps them with pre-built Tailwind patterns — Button, Card, DropdownMenu, NavigationMenu — so you're not reinventing Popover every project. Copy, own, customize. In Velocity X, we use shadcn's NavigationMenu in the header (keyboard nav for free), DropdownMenu in product filters (escape and outside-click built in), Dialog for checkout modals. Every component gets focus management and keyboard accessibility without a single a11y-prop.
Why this beats full-featured libs: Material UI at 45KB ships 200+ pre-built components you'll never use. You can't delete them without ejecting. Chakra couples styling to component names — rename the component, lose the styles. Radix + Tailwind decouples mechanics from design. Change your color scheme? Update your CSS classNames. Change your modal animation? Swap the transition utility. You own the output.
The tradeoff: you're trading pre-built polish for raw control. A Chakra Button comes with size variants and color schemes. A Radix button is an unstyled `