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.

Sheet Component - shadcn/ui Examples

About the shadcn/ui Sheet Component

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

Sheet Component — Frequently Asked Questions

What is the difference between shadcn Sheet and Drawer?

Sheet slides from the edge and is better for desktop sidebar panels and filter drawers. Drawer (Vaul) is optimized for mobile with drag-to-close gestures.

How do I make a Sheet open from the left?

Set `side="left"` on `<SheetContent>`: `<SheetContent side="left">`. Options are left, right (default), top, bottom.

How do I put a scrollable list inside a shadcn Sheet?

Add `overflow-y-auto` to `<SheetContent>` or use `<ScrollArea>` inside. Set a max-height on the content wrapper to enable scrolling.