Primitives
Accordion
Stacked disclosure rows with measured panel animation.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Parts
Exported compound parts from the installed source.
Accordion├── AccordionItem├── AccordionTrigger└── AccordionPanelThe refined source installs this primitive from src/registry/sources/refined/ui/accordion.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/accordion.jsonRaw code
Primary installed primitive source
Base UI Accordion slot
src/registry/sources/refined/ui/accordion.tsx
"use client";import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";import { ChevronDown } from "lucide-react";import type { AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps } from "@/components/refined-ui/contracts";import { cn } from "@/components/refined-ui/lib/cn";import { skinSlot } from "@/components/refined-ui/skin";// 100% Base UI: Panel height animates via Base UI's --accordion-panel-height var (pure CSS, no JS measuring).// Header h3 stays a structural wrapper (no data-slot), mirroring Collapsible's content wrapper.export function Accordion({ className, ...props }: AccordionProps) { return <AccordionPrimitive.Root data-ui="agent" data-slot="accordion" className={cn(skinSlot("accordion", {}), className)} {...props} />;}export function AccordionItem({ className, ...props }: AccordionItemProps) { return ( <AccordionPrimitive.Item data-ui="agent" data-slot="accordion-item" className={cn("border-b border-border last:border-b-0", skinSlot("accordion-item", {}), className)} {...props} /> );}export function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) { return ( <AccordionPrimitive.Header className="flex"> <AccordionPrimitive.Trigger data-ui="agent" data-slot="accordion-trigger" className={cn( "group flex flex-1 items-center justify-between gap-4 py-3 text-left text-sm font-medium text-foreground outline-none", "cursor-pointer select-none transition-colors hover:text-foreground/80 focus-visible:ring-2 focus-visible:ring-foreground/20", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", skinSlot("accordion-trigger", {}), className, )} {...props} > {children} <ChevronDown aria-hidden="true" className="size-4 shrink-0 text-muted-foreground transition-transform duration-[var(--duration-base)] ease-[var(--ease-standard)] group-data-[panel-open]:rotate-180" /> </AccordionPrimitive.Trigger> </AccordionPrimitive.Header> );}export function AccordionPanel({ className, children, ...props }: AccordionPanelProps) { return ( <AccordionPrimitive.Panel data-ui="agent" data-slot="accordion-panel" className={cn( "h-[var(--accordion-panel-height)] overflow-hidden text-sm text-muted-foreground", "transition-[height] duration-[var(--duration-base)] ease-[var(--ease-emphasized)]", "data-[starting-style]:h-0 data-[ending-style]:h-0", skinSlot("accordion-panel", {}), )} {...props} > <div className={cn("pb-3", className)}>{children}</div> </AccordionPrimitive.Panel> );}