Switch
Pattern-matching conditional container supporting Case and Default branches.
1.5 KB
•Updated on August 21, 2026
Example 2: Order Status Badge Renderer
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/hooks-components-switchUsage
Code
import { Switch, Case, Default } from '@/components/switch'
import { Switch, Case, Default } from '@/components/switch'```
```tsx
<Switch>
<Case condition={tab === 'home'}>
<Home />
</Case>
<Case condition={tab === 'profile'}>
<Profile />
</Case>
<Default>
<Settings />
</Default>
</Switch>API Reference
Parameters / Props
| Component | Prop | Description |
|---|---|---|
<Switch /> | children | Container for Case elements. |
<Case /> | condition | Branch condition. |
<Default /> | children | Fallback branch. |
Return Value
| Return Type | Description |
|---|---|
ReactNode | Matched branch. |