Content Switch React component
A switch that swaps the content below it: a pill or underline thumb slides to the chosen option, the new panel slides in from that side (or fades or blurs in), and the box eases to the new height instead of jumping.
When to use the Content Switch component
Use Content Switch when a section shows one of a few alternative views of the same thing: preview / code, personal / business plans, map / list, before / after.
For full-page navigation between unrelated sections, use Tabs or real links instead.
Installation
Add the Content Switch component to your project with the shadcn CLI. It lands in components/content-switch.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add https://reactframe.com/r/content-switch.jsonOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ContentSwitch /> accepts 10 props, all optional.
| Prop | Type | Default |
|---|---|---|
| options | { value: string; label: string; icon?: React.ReactNode; content: React.ReactNode }[] | — |
| value | string | — |
| defaultValue | string | — |
| onValueChange | (value: string) => void | — |
| variant pill: a filled thumb slides behind the labels. underline: a line slides under them. | "pill" | "underline" | "pill" |
| transition How panels change: slide in from the side of the new option, fade, or blur. | "slide" | "fade" | "blur" | "slide" |
| align | "start" | "center" | "start" |
| label | string | "View" |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- options{ value: string; label: string; icon?: React.ReactNode; content: React.ReactNode }[]
- valuestring
- defaultValuestring
- onValueChange(value: string) => void
- variant
pill: a filled thumb slides behind the labels. underline: a line slides under them.
"pill" | "underline"Default: "pill" - transition
How panels change: slide in from the side of the new option, fade, or blur.
"slide" | "fade" | "blur"Default: "slide" - align"start" | "center"Default: "start"
- labelstringDefault: "View"
- theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- How is it different from Tabs?
- It's built for a few closely related views inside one card or section: a compact switch, panels that slide in from the chosen side, and a box that eases to the new content height.
- Does the layout jump when panels have different heights?
- No. The container measures each panel and springs to its height.
- Is it keyboard accessible?
- It's a tablist: arrow keys move between options and select them, and each panel is labelled by its tab.
