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.

Tooltip Component - shadcn/ui Examples

About the shadcn/ui Tooltip Component

The Tooltip 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 tooltip` and copy it directly into your project.

Tooltip Component — Frequently Asked Questions

How do I show a shadcn Tooltip on a disabled button?

Wrap the disabled button in a `<span>`: `<Tooltip><TooltipTrigger asChild><span><Button disabled>Click</Button></span></TooltipTrigger></Tooltip>`. Disabled elements don't fire pointer events.

How do I change the delay before a shadcn Tooltip appears?

Set `delayDuration` on `<TooltipProvider>`: `<TooltipProvider delayDuration={300}>`. Value is in milliseconds. Use 0 for instant display.

How do I put rich content (not just text) inside a Tooltip?

Add any JSX inside `<TooltipContent>`. For example, include an icon and formatted text. Set `className` to adjust padding and width as needed.