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.

Slider Component - shadcn/ui Examples

About the shadcn/ui Slider Component

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

Slider Component — Frequently Asked Questions

How do I create a price range slider with two handles?

Use `defaultValue={[20, 80]}` (an array) on `<Slider>`. The component supports multiple thumbs when the value array has more than one element.

How do I use shadcn Slider with React Hook Form?

Wrap in `<Controller>`: `<Controller name="volume" render={({ field }) => <Slider value={[field.value]} onValueChange={([v]) => field.onChange(v)} />}`.

How do I display the current slider value next to the handle?

Read the value from state and render it beside the slider. Add `onValueChange={(v) => setValue(v[0])}` to track the current value and display it.