Numbered accordions
Five accordions that lead each row with a step-number chip: a round circle, a rounded square, an outline, a solid fill and a bare ghost number. 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-numberedDependencies, the @ai2/tokens theme and the component file are installed together.
Install dependencies
npm install motion lucide-reactCopy the source
components/ui/accordion-numbered.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"
/* Numbered accordion family: 5 step-numbered accordions. Every row starts with
a token step-number chip; the variants change the chip's shape and fill.
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: "px-3 py-2.5 text-sm",
md: "px-4 py-3 text-sm",
lg: "px-5 py-4 text-base",
xl: "px-6 py-5 text-lg",
}
const bodyPad: Record<StyledSize, string> = {
sm: "pl-11 pr-3 pb-2.5 text-sm",
md: "pl-12 pr-4 pb-3 text-sm",
lg: "pl-14 pr-5 pb-4 text-base",
xl: "pl-16 pr-6 pb-5 text-base",
}
const iconSize: Record<StyledSize, string> = {
sm: "size-4",
md: "size-4",
lg: "size-5",
xl: "size-5",
}
const chipSize: Record<StyledSize, string> = {
sm: "size-5 text-xs",
md: "size-6 text-xs",
lg: "size-7 text-sm",
xl: "size-8 text-sm",
}
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 gap-3 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], "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="ml-auto shrink-0 text-muted-foreground"
animate={{ rotate: isOpen ? 180 : 0 }}
transition={reduce ? { duration: 0 } : { duration: 0.2 }}
>
<ChevronDown className={iconSize[size]} />
</motion.span>
)
}
/* Shared numbered shell: one frame, rows divided by a token line, a step-number
chip on each row. chipClass carries each variant's shape/fill technique. */
function NumberedShell({
props,
chipClass,
}: {
props: StyledAccordionProps
chipClass: string
}) {
const { className, size = "md", items = defaultItems, defaultOpen } = props
const { open, toggle } = useSingleOpen(defaultOpen)
return (
<div
data-slot="styled-accordion"
className={cn(
"overflow-hidden rounded-xl border border-border bg-background",
className
)}
>
{items.map((item, i) => {
const isOpen = open === item.value
return (
<div key={item.value} className={cn(i > 0 && "border-t border-border")}>
<button
type="button"
aria-expanded={isOpen}
onClick={() => toggle(item.value)}
className={cn(
headerBase,
headerPad[size],
"hover:bg-[color-mix(in_oklab,var(--color-foreground)_5%,transparent)]"
)}
>
<span
aria-hidden
className={cn(
"inline-flex shrink-0 items-center justify-center font-semibold tabular-nums",
chipSize[size],
chipClass
)}
>
{i + 1}
</span>
<span className="min-w-0">{item.title}</span>
<Chevron isOpen={isOpen} size={size} />
</button>
<Panel isOpen={isOpen} size={size}>
{item.content}
</Panel>
</div>
)
})}
</div>
)
}
/* Circle: yuvarlak yumusak-primary chip. */
export function CircleAccordion(props: StyledAccordionProps) {
return (
<NumberedShell
props={props}
chipClass="rounded-full bg-[color-mix(in_oklab,var(--color-primary)_15%,transparent)] text-primary"
/>
)
}
/* Square: yuvarlatilmis kare yumusak-surface chip. */
export function SquareAccordion(props: StyledAccordionProps) {
return (
<NumberedShell
props={props}
chipClass="rounded-md bg-surface-2 text-foreground"
/>
)
}
/* Outline: cizgili yuvarlak chip, seffaf dolgu. */
export function OutlineAccordion(props: StyledAccordionProps) {
return (
<NumberedShell
props={props}
chipClass="rounded-full border border-border text-muted-foreground"
/>
)
}
/* Filled: dolu primary chip, ust-metin. */
export function FilledAccordion(props: StyledAccordionProps) {
return (
<NumberedShell
props={props}
chipClass="rounded-full bg-primary text-primary-foreground"
/>
)
}
/* Ghost: no frame, only colored number text. */
export function GhostAccordion(props: StyledAccordionProps) {
return (
<NumberedShell props={props} chipClass="rounded-full text-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.
Circle
A round soft-primary step chip on each row.
import { CircleAccordion } from "@/components/ui/accordion-numbered"
<CircleAccordion />Square
A rounded-square soft-surface step chip.
import { SquareAccordion } from "@/components/ui/accordion-numbered"
<SquareAccordion />Outline
An outlined round chip with a transparent fill.
import { OutlineAccordion } from "@/components/ui/accordion-numbered"
<OutlineAccordion />Filled
A solid primary chip with on-primary text.
import { FilledAccordion } from "@/components/ui/accordion-numbered"
<FilledAccordion />Ghost
A borderless chip that is just a colored number.
import { GhostAccordion } from "@/components/ui/accordion-numbered"
<GhostAccordion />ai2 Numbered accordions: 5 styled variations on the token system
The ai2 Numbered accordions are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around collapsible sections that lead each row with a step-number chip. 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 Numbered accordions?
5 exports in one file: Circle, Square, Outline, Filled and Ghost. 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 Numbered 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.