86 Pro components and page blocks

Get Pro
uibrik

Accordion Spine

Pro

Preview

Customize

Duration0.55s
Radius14px
Stroke1.50px

Installation

Pro

Accordion Spine is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/accordion-spine

Usage

import { AccordionSpine } from "@/components/uibrik/accordion-spine/accordion-spine";​const items = [  {    id: "3-4",    title: "Offline drafts",    meta: "v3.4 · Oct 2026",    content: (      <>        <p>Drafts save to the device as you type and sync when you are back online. Conflicts open side by side, so nothing is overwritten.</p>        <ul>          <li>Works across tabs and windows</li>          <li>Up to 500 drafts kept on each device</li>        </ul>      </>    ),  },  {    id: "3-3",    title: "Shared views",    meta: "v3.3 · Aug 2026",    content: <p>Save a filtered view and share it with a link. Everyone sees the same columns, sort and grouping, and updates arrive live.</p>,  },  // …3 more];​<AccordionSpine  multiple={false}  duration={0.55}  radius={14}  stroke={1.5}  items={items}  onValueChange={(value) => {}}  // value={["…"]}  // defaultValue={["…"]}/>

Props

AccordionSpine
multiple
Type boolean
false
Let several entries be open at once.
duration
Type number
0.55
How long an entry takes to open or close.
radius
Type number
14
Corner radius of the frame the line draws.
stroke
Type number
1.5
Width of the line.
items
Type { id: string; title: string; meta?: string; content: ReactNode }[]
SAMPLE_ITEMS
Entries from top to bottom.
value
Type string[]
–
Open entries by id, to control them.
defaultValue
Type string[]
[first id]
Entries open to begin with when uncontrolled.
onValueChange
Type (value: string[]) => void
–
Called with the open ids whenever an entry is toggled.
className
Type string
–
Classes for the wrapper.