Shadcn/UI is a component library built on Tailwind CSS and Radix UI primitives. Unlike traditional libraries, you copy components directly into your project, giving you full control over styling and behavior.

How do I install Shadcn/UI components?

Use the shadcn CLI to add components: npx shadcn@latest add [component-name]. This copies the component files directly into your project.

Can I customize Shadcn/UI components?

Yes, since components are copied into your project, you have complete control. Modify styling, add props, or change behavior as needed.

Is Shadcn/UI free to use?

Yes, Shadcn/UI is completely free and open-source. Components are MIT licensed and you can use them in any project, including commercial ones.

Kbd Component - shadcn/ui Examples

About the shadcn/ui Kbd Component

The Kbd component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add kbd` and copy it directly into your project.

Kbd Component — Frequently Asked Questions

How do I display a keyboard shortcut combination like Ctrl+K?

Use multiple `<Kbd>` elements: `<Kbd>Ctrl</Kbd><span>+</span><Kbd>K</Kbd>`. The kbd-group example shows how to render key combinations with proper spacing.

Where should I use the shadcn Kbd component?

Use Kbd in command palettes, tooltips, keyboard shortcut guides, and help documentation. It visually distinguishes keys from regular text for better scannability.

How do I embed a Kbd inside a Button?

The kbd-button example shows a Button with a Kbd inside for showing shortcuts: `<Button>Search <Kbd>⌘K</Kbd></Button>`. Use `ml-auto` to push the shortcut to the right.