184 Components
Spring Dropdown Chevron
NavigationDisclosure chevron trigger with hover tension anticipation, smooth rotational inertia, and spring overshoot.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/spring-dropdown-chevron.json"
Props
TypeScript props supported by <SpringDropdownChevron />.
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen | boolean | — | Controlled open state. |
| defaultOpen | boolean | false | Initial state in uncontrolled mode. |
| onToggle | (isOpen: boolean) => void | — | Callback fired when disclosure changes. |
| label | string | — | Optional label placed before the chevron. |
| size | "sm" | "md" | "lg" | "md" | Size preset. |
Key Features
- 15° hover tension tilt that anticipates user interaction before clicking.
- Full 180° spring rotational trajectory with natural overshoot.
- Dual controlled and uncontrolled states.
- Full keyboard navigation and aria-expanded semantics.
Keyboard & Accessibility
- Semantically bound to aria-expanded.
- Keyboard triggered via Enter or Space.
- Prefe-reduced-motion switches to simple linear orientation.