Docs·Line Accordion

Line Accordion

A restrained FAQ accordion with dividing lines, smooth height transitions, and a plus-to-minus indicator.

Installation

$pnpm dlx shadcn@latest add @spiderui/line-accordion

Usage

API Reference

PropTypeDefault
itemsRows with an id, title, content, and optional disabled state.
LineAccordionItem[]—
valueControlled open item ids.
string | string[]—
defaultValueInitial open item ids for uncontrolled state.
string | string[]—
onValueChangeRuns whenever the open item ids change.
(value: string[]) => void—
allowMultipleAllow several items to remain open at once.
booleanfalse
classNameAdditional classes for the accordion wrapper.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
Spider UI is an animated component registry for React and Next.js, with polished primitives you can copy, customize, and ship.
Use the registry command from each component page, then tailor the copied source to your product and design tokens.
Yes. Every component exposes ordinary React props and className hooks, so it fits your existing visual system.
This component uses Motion for a soft height and icon transition, while honoring reduced-motion preferences.
import { LineAccordion } from "@/components/ui/line-accordion"
const items = [
  {
    id: "shipping",
    title: "How quickly can I ship?",
    content: "Copy the source, add your content, and adjust the classes.",
  },
  {
    id: "control",
    title: "Can I control the active item?",
    content: "Yes. Pass value and onValueChange.",
  },
]

export function Demo() {
  return <LineAccordion items={items} defaultValue="shipping" />
}