H
UI by hampton.io
Back to Components
Navigation

Accordion

Collapsible sections with smooth height animation and accessible controls.

PropsUsage ExampleVariations
You get full access to the component source plus updates.

Dependencies

  • clsx
  • tailwind-merge
  • framer-motion

Files

  • components/ui/accordion.tsx

Installation

Using shadcn CLI

npx shadcn add accordion --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge framer-motion

Related Navigation Components

Bottom Nav Bar

Mobile-style bottom navigation with icons, labels, and active state.

Breadcrumb Dropdown

Breadcrumbs with an overflow dropdown for deep navigation paths.

Breadcrumb Trail

Animated breadcrumbs with an overflow dropdown for longer navigation paths.

Breadcrumbs

Navigation breadcrumbs with separators, current page styling, and optional collapse.

Collapsible

Expandable content section with animated open/close transitions.

Command

Command input component with searchable list of actions.