Timeline accordions
Five accordions that run a vertical connector line with node dots down the left edge: a solid line, a dashed line, a ring node, a filled node and a gradient. The active row lights its node. Each is self-contained, sized, token-driven and animates its height on open.
Installation
The styled layer is free and installs like any other ai2 component.
Run the following command
npx shadcn@latest add @ai2/accordion-timelineDependencies, the @ai2/tokens theme and the component file are installed together.
Install dependencies
npm install motion lucide-reactCopy the source
components/ui/accordion-timeline.tsx"use client"
import * as React from "react"
import { ChevronDown } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"
import { cn } from "@/lib/utils"
/* Timeline accordion family: 5 vertical-line accordions. A vertical connector
runs down the left edge with a node dot on every row; the variants change the
style of the line and the node. Every export is a complete accordion: internal
single-open state, a button header with aria-expanded, framer height auto
animation. Colour comes ONLY from tokens. Alpha via color-mix. Under
reduced-motion opening and closing are instant. Size = padding + text scale.
Renders without props too. */
export type StyledSize = "sm" | "md" | "lg" | "xl"
export interface StyledAccordionItem {
value: string
title: React.ReactNode
content: React.ReactNode
}
interface StyledAccordionProps {
className?: string
size?: StyledSize
items?: StyledAccordionItem[]
defaultOpen?: string
}
const headerPad: Record<StyledSize, string> = {
sm: "py-2.5 text-sm",
md: "py-3 text-sm",
lg: "py-4 text-base",
xl: "py-5 text-lg",
}
const bodyPad: Record<StyledSize, string> = {
sm: "pb-2.5 text-sm",
md: "pb-3 text-sm",
lg: "pb-4 text-base",
xl: "pb-5 text-base",
}
const iconSize: Record<StyledSize, string> = {
sm: "size-4",
md: "size-4",
lg: "size-5",
xl: "size-5",
}
const defaultItems: StyledAccordionItem[] = [
{
value: "item-1",
title: "What is included?",
content:
"Every plan ships the full component library, semantic tokens, and lifetime updates for the tier you own.",
},
{
value: "item-2",
title: "How does installation work?",
content:
"Add any component with a single CLI command. Files land in your project and stay fully editable.",
},
{
value: "item-3",
title: "Can I use it in production?",
content:
"Yes. The system is framework agnostic, self contained, and safe to ship to any number of projects.",
},
]
function useSingleOpen(defaultOpen?: string) {
const [open, setOpen] = React.useState<string | null>(defaultOpen ?? null)
const toggle = React.useCallback(
(value: string) => setOpen((cur) => (cur === value ? null : value)),
[]
)
return { open, toggle }
}
const headerBase =
"flex w-full items-center justify-between gap-3 pr-1 text-left font-medium outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50"
function Panel({
isOpen,
size,
children,
}: {
isOpen: boolean
size: StyledSize
children: React.ReactNode
}) {
const reduce = useReducedMotion()
return (
<AnimatePresence initial={false}>
{isOpen && (
<motion.div
key="panel"
initial={reduce ? false : { height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={
reduce ? { duration: 0 } : { duration: 0.25, ease: [0.4, 0, 0.2, 1] }
}
className="overflow-hidden"
>
<div className={cn(bodyPad[size], "pr-1 text-muted-foreground")}>
{children}
</div>
</motion.div>
)}
</AnimatePresence>
)
}
function Chevron({ isOpen, size }: { isOpen: boolean; size: StyledSize }) {
const reduce = useReducedMotion()
return (
<motion.span
aria-hidden
className="shrink-0 text-muted-foreground"
animate={{ rotate: isOpen ? 180 : 0 }}
transition={reduce ? { duration: 0 } : { duration: 0.2 }}
>
<ChevronDown className={iconSize[size]} />
</motion.span>
)
}
/* Shared timeline shell: a vertical connector on the left edge plus a node dot
on every row. lineClass carries the line style, nodeClass the node style. */
function TimelineShell({
props,
lineClass,
nodeClass,
}: {
props: StyledAccordionProps
lineClass: string
nodeClass: string
}) {
const { className, size = "md", items = defaultItems, defaultOpen } = props
const { open, toggle } = useSingleOpen(defaultOpen)
return (
<div
data-slot="styled-accordion"
className={cn("flex flex-col", className)}
>
{items.map((item, i) => {
const isOpen = open === item.value
const isLast = i === items.length - 1
return (
<div key={item.value} className="relative pl-7">
{/* vertical connector line */}
{!isLast && (
<span
aria-hidden
className={cn(
"absolute left-[5px] top-5 bottom-0 w-px",
lineClass
)}
/>
)}
{/* node noktasi */}
<span
aria-hidden
className={cn(
"absolute left-0 top-4 size-[11px] rounded-full transition-colors",
nodeClass,
isOpen && "bg-primary"
)}
/>
<button
type="button"
aria-expanded={isOpen}
onClick={() => toggle(item.value)}
className={cn(headerBase, headerPad[size])}
>
<span className="min-w-0">{item.title}</span>
<Chevron isOpen={isOpen} size={size} />
</button>
<Panel isOpen={isOpen} size={size}>
{item.content}
</Panel>
</div>
)
})}
</div>
)
}
/* Line: a plain thin token line plus a hollow node ring. */
export function LineAccordion(props: StyledAccordionProps) {
return (
<TimelineShell
props={props}
lineClass="bg-border"
nodeClass="border-2 border-border bg-background"
/>
)
}
/* Dashed: a dashed vertical line plus a hollow node ring. */
export function DashedAccordion(props: StyledAccordionProps) {
return (
<TimelineShell
props={props}
lineClass="w-0 border-l border-dashed border-border bg-transparent"
nodeClass="border-2 border-border bg-background"
/>
)
}
/* Node: a pronounced ring node plus a token line. */
export function NodeAccordion(props: StyledAccordionProps) {
return (
<TimelineShell
props={props}
lineClass="bg-border"
nodeClass="border-2 border-primary bg-background"
/>
)
}
/* Filled: a solid primary node plus a token line. */
export function FilledAccordion(props: StyledAccordionProps) {
return (
<TimelineShell
props={props}
lineClass="bg-border"
nodeClass="bg-primary"
/>
)
}
/* Gradient: a line fading from top to bottom plus a solid node. */
export function GradientAccordion(props: StyledAccordionProps) {
return (
<TimelineShell
props={props}
lineClass="bg-gradient-to-b from-primary to-[color-mix(in_oklab,var(--color-primary)_10%,transparent)]"
nodeClass="bg-primary"
/>
)
}Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.
Variations
5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.
Line
A solid thin connector with hollow ring nodes.
import { LineAccordion } from "@/components/ui/accordion-timeline"
<LineAccordion />Dashed
A dashed vertical connector with hollow ring nodes.
import { DashedAccordion } from "@/components/ui/accordion-timeline"
<DashedAccordion />Node
A prominent primary ring node with a solid connector.
import { NodeAccordion } from "@/components/ui/accordion-timeline"
<NodeAccordion />Filled
Solid primary nodes with a solid connector.
import { FilledAccordion } from "@/components/ui/accordion-timeline"
<FilledAccordion />Gradient
A top-to-bottom fading gradient connector with solid nodes.
import { GradientAccordion } from "@/components/ui/accordion-timeline"
<GradientAccordion />ai2 Timeline accordions: 5 styled variations on the token system
The ai2 Timeline accordions are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around collapsible sections with a vertical connector line and node dots. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.
Motion runs on framer-motion: framer-motion animates the panel height and rotates the icon on open. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the panels expand and collapse instantly with no height animation.
What is in the ai2 Timeline accordions?
5 exports in one file: Line, Dashed, Node, Filled and Gradient. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.
You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.
Why use it
- On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
- Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
- Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.
Features
- Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
- framer-motion: framer-motion animates the panel height and rotates the icon on open.
- Reduced-motion aware: Under prefers-reduced-motion, the panels expand and collapse instantly with no height animation.
- Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.
Production tips
- Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
- Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
- Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.
Works with the rest of ai2
The Timeline accordions sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.