Slot

Utility

Merges props and className onto a single child element.

Slot passes its props and className down to its only child, letting you attach styles and handlers without wrapping elements.

npx shadcn@latest add slot

Default

The Slot className merges onto the child button.

Preview

Live

Click the button above.

tsx

1const [clicked, setClicked] = useState(false)
2
3<Slot
4  className="bg-primary text-primary-foreground"
5  onClick={() => setClicked(true)}
6>
7  <button type="button" className="rounded-lg px-3 py-2 text-sm font-medium">
8    A styled button
9  </button>
10</Slot>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
children	React.ReactNode	A single element to merge props onto.
className	string	Merged with the child className via cn.
onClick	(event) => void	Event handlers are forwarded to the child.