Fan View

Use Fan View for a short set of visual choices that can open from one trigger. Its cards spread into a fanned layout and collapse after selection, outside interaction, or Escape.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Motion

npx shadcn@latest add @sona-ui/fan-view

Basic usage

fan-menu.tsx

import FanView from "@/components/ui/fan-view/fan-view";
 
const items = [
{ label: "Library", onSelect: () => console.log("Library") },
{ label: "Profile", onSelect: () => console.log("Profile") },
];
 
export function FanMenu() {
return <FanView items={items} />;
}

Examples

Pass controlled open state when the menu is coordinated with another view. Keep the item count small so each card remains readable in the fan.

Usage


"use client";
 
import FanView from "@/components/ui/fan-view/fan-view";
 
const ITEMS = [
  { label: "Music", width: 164 },
  { label: "Video", width: 160 },
  { label: "Image", width: 156 },
  { label: "Learning", width: 180 },
  { label: "Document", width: 196 },
];
 
export default function FanViewDemo() {
  return <FanView items={ITEMS} />;
}

API

Property	Type	Default	Description
`items`	`FanViewItem[]`	`—`	Items displayed as fanned cards when open.
`open`	`boolean`	`—`	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	`—`	Called when the view opens or closes.
`stiffness`	`number`	`540`	Spring stiffness for the fan animation.
`damping`	`number`	`28`	Spring damping for the fan animation.
`className`	`string`	`—`	Additional CSS classes for the root container.

Accessibility

Escape closes the view and restores focus to the trigger. Give each card a short label and ensure its action is available without relying on the animation.

Styling

Adjust card content, widths, and motion options to fit the context. Reduced-motion preferences remove the fanning movement.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Was this page helpful?

Your response helps us improve component docs.