Adventureland Registry

Accordion Filter Group

A single animated accordion panel containing labelled checkboxes, used as a filter group inside a sidebar. Smooth open/close transitions driven by CSS and useLayoutEffect — no GSAP required.

AccordionFilterGroup renders one collapsible panel of checkbox filters. It manages its own height animation via useLayoutEffect and staggers each checkbox in on open. Wire selected + onFilterToggle for controlled selection, or omit them for an uncontrolled display-only mode.

Installation

npx shadcn@latest add @adv/accordion-filter-group

Usage

import { AccordionFilterGroup } from '@/components/sectionAccordion/accordion-filter-group';
import { Accordion } from '@/components/ui/accordion';

const filters = [
  { id: 'video', label: 'Video', count: 21 },
  { id: 'blog', label: 'Blog', count: 53 },
];

export function MyFilter() {
  const [isOpen, setIsOpen] = useState(true);
  const [selected, setSelected] = useState<string[]>([]);

  return (
    <Accordion type="multiple" value={isOpen ? ['type'] : []}>
      <AccordionFilterGroup
        title="Type"
        value="type"
        filters={filters}
        isOpen={isOpen}
        onToggle={() => setIsOpen((v) => !v)}
        selected={selected}
        onFilterToggle={(id) =>
          setSelected((prev) =>
            prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
          )
        }
      />
    </Accordion>
  );
}

Example

Props

PropTypeDefaultDescription
titlestring—Label shown in the accordion trigger.
valuestring—Unique key for this accordion item (used by the parent Accordion).
filtersFilterOption[]—Array of filter options { id, label, count }.
isOpenboolean—Controls whether the panel is expanded.
onToggle(value: string) => void—Called when the trigger is clicked; receives the value key.
selectedstring[][]Ids of currently checked filters (controlled).
onFilterToggle(id: string) => void—Called when a checkbox is toggled. Omit for display-only mode.

Lazy Load Image (next/image)

A next/image wrapper that tracks idle/loading/loaded/error state, shows a spinner placeholder and fades the image in once it loads.

Filter Section

A sidebar filter panel composing two AccordionFilterGroup instances (Type and Topic). Accepts filter option arrays via props so no seed data is baked in.

On this page

InstallationUsageExampleProps