Smooth Accordion

A sleek accordion component with smooth blur animations, dynamic border radius transitions, and elegant content expansion.

Preview

Why do design engineers love coffee?

What's a design engineer's favorite party trick?

How do design engineers fix a bug?

Biggest design engineering secret?

Installation

npx shadcn add https://dark-ui.vercel.app/r/smooth-accordion.json

Usage

import SmoothAccordion from "@/components/smooth-accordion";

export default function Example() {
  return <SmoothAccordion />;
}

Custom Items

import SmoothAccordion, { AccordionItem } from "@/components/smooth-accordion";

export default function Example() {
  const items: AccordionItem[] = [
    {
      label: "What is React?",
      data: "React is a JavaScript library for building user interfaces.",
    },
    {
      label: "What is Next.js?",
      data: "Next.js is a React framework for production-grade applications.",
    },
  ];

  return <SmoothAccordion items={items} />;
}

Props

Prop	Type	Default	Description
`className`	`string`	`undefined`	Custom class for the container.
`items`	`AccordionItem[]`	`[...]`	Array of accordion items to display.

Named Exports

The component exports reusable parts for composition and tree-shaking:

import { ChevronDownIcon, AccordionItem } from "@/components/smooth-accordion";

ChevronDownIcon: Memoized chevron icon component
AccordionItem: TypeScript interface for accordion items