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.
About the Content Switch component
Content Switch is a small segmented switch with a content area under it, for flipping between a few views of the same thing, such as preview and code or monthly and yearly. Choosing an option slides its panel in from that option's side, or fades or blurs it in, and the box eases to the new content's height instead of jumping.
options takes objects with value, label, an optional icon and the content to show. value or defaultValue with onValueChange set and report the choice. variant picks pill, a filled thumb that slides behind the labels, or underline, a line that slides under them. transition picks slide, fade or blur, and align puts the switch at the start or the center. It is a tablist, so arrow keys move between options and each panel is labelled by its tab.
When to use it
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 @reactframe/content-switchOr 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
npm dependencies
Installed for you by the shadcn CLI.
Content Switch 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.
- Does it keep each panel's state when switching?
- No. Only the chosen panel is rendered, so the others unmount when hidden. Keep state that must survive switching, such as form input, in a parent component.
