Are the ai2 Styled accordion free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Styled accordion

Five accordion treatments: bordered, separated cards, a filled open state, a ghost minimal and a rotating plus. Each is sized, token-driven and animates its height on open.

LayoutAccordion

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/accordion-styled

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/accordion-styled.tsx

"use client"

import * as React from "react"
import { ChevronDown, Plus } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Accordion family: 5 decorative accordions. 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: "px-3 pb-2.5 text-sm",
  md: "px-4 pb-3 text-sm",
  lg: "px-5 pb-4 text-base",
  xl: "px-6 pb-5 text-base",
}

const iconSize: Record<StyledSize, string> = {
  sm: "size-4",
  md: "size-4",
  lg: "size-5",
  xl: "size-5",
}

const hoverTint =
  "hover:bg-[color-mix(in_oklab,var(--color-foreground)_5%,transparent)]"

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 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={reduce ? { height: 0, opacity: 0 } : { 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="shrink-0 text-muted-foreground"
      animate={{ rotate: isOpen ? 180 : 0 }}
      transition={reduce ? { duration: 0 } : { duration: 0.2 }}
    >
      <ChevronDown className={iconSize[size]} />
    </motion.span>
  )
}

function PlusMark({ isOpen, size }: { isOpen: boolean; size: StyledSize }) {
  const reduce = useReducedMotion()
  return (
    <motion.span
      aria-hidden
      className="shrink-0 text-muted-foreground"
      animate={{ rotate: isOpen ? 45 : 0 }}
      transition={reduce ? { duration: 0 } : { duration: 0.2 }}
    >
      <Plus className={iconSize[size]} />
    </motion.span>
  )
}

/* Bordered: tek cerceveli kap, satirlar token cizgiyle bolunur, chevron doner. */
export function BorderedAccordion({
  className,
  size = "md",
  items = defaultItems,
  defaultOpen,
}: StyledAccordionProps) {
  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], hoverTint)}
            >
              {item.title}
              <Chevron isOpen={isOpen} size={size} />
            </button>
            <Panel isOpen={isOpen} size={size}>
              {item.content}
            </Panel>
          </div>
        )
      })}
    </div>
  )
}

/* Separated: her item ayri yuvarlak token kart, aralarinda bosluk. */
export function SeparatedAccordion({
  className,
  size = "md",
  items = defaultItems,
  defaultOpen,
}: StyledAccordionProps) {
  const { open, toggle } = useSingleOpen(defaultOpen)
  return (
    <div
      data-slot="styled-accordion"
      className={cn("flex flex-col gap-2", className)}
    >
      {items.map((item) => {
        const isOpen = open === item.value
        return (
          <div
            key={item.value}
            className="overflow-hidden rounded-xl border border-border bg-background"
          >
            <button
              type="button"
              aria-expanded={isOpen}
              onClick={() => toggle(item.value)}
              className={cn(headerBase, headerPad[size], hoverTint)}
            >
              {item.title}
              <Chevron isOpen={isOpen} size={size} />
            </button>
            <Panel isOpen={isOpen} size={size}>
              {item.content}
            </Panel>
          </div>
        )
      })}
    </div>
  )
}

/* Filled: acik olan item yumusak token dolgu arka plani alir. */
export function FilledAccordion({
  className,
  size = "md",
  items = defaultItems,
  defaultOpen,
}: StyledAccordionProps) {
  const { open, toggle } = useSingleOpen(defaultOpen)
  return (
    <div
      data-slot="styled-accordion"
      className={cn("flex flex-col gap-1", className)}
    >
      {items.map((item) => {
        const isOpen = open === item.value
        return (
          <div
            key={item.value}
            className={cn(
              "overflow-hidden rounded-lg transition-colors",
              isOpen && "bg-surface-2"
            )}
          >
            <button
              type="button"
              aria-expanded={isOpen}
              onClick={() => toggle(item.value)}
              className={cn(
                headerBase,
                headerPad[size],
                !isOpen && hoverTint
              )}
            >
              {item.title}
              <Chevron isOpen={isOpen} size={size} />
            </button>
            <Panel isOpen={isOpen} size={size}>
              {item.content}
            </Panel>
          </div>
        )
      })}
    </div>
  )
}

/* Ghost: no frame, minimal; only a chevron + a hover token tint. */
export function GhostAccordion({
  className,
  size = "md",
  items = defaultItems,
  defaultOpen,
}: StyledAccordionProps) {
  const { open, toggle } = useSingleOpen(defaultOpen)
  return (
    <div
      data-slot="styled-accordion"
      className={cn("flex flex-col", className)}
    >
      {items.map((item) => {
        const isOpen = open === item.value
        return (
          <div key={item.value}>
            <button
              type="button"
              aria-expanded={isOpen}
              onClick={() => toggle(item.value)}
              className={cn(
                headerBase,
                headerPad[size],
                "rounded-lg",
                hoverTint
              )}
            >
              {item.title}
              <Chevron isOpen={isOpen} size={size} />
            </button>
            <Panel isOpen={isOpen} size={size}>
              {item.content}
            </Panel>
          </div>
        )
      })}
    </div>
  )
}

/* Plus: token arti ikonu, acikken doner ve x'e donusur. */
export function PlusAccordion({
  className,
  size = "md",
  items = defaultItems,
  defaultOpen,
}: StyledAccordionProps) {
  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
        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])}
            >
              {item.title}
              <PlusMark isOpen={isOpen} size={size} />
            </button>
            <Panel isOpen={isOpen} size={size}>
              {item.content}
            </Panel>
          </div>
        )
      })}
    </div>
  )
}

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.

Bordered

One bordered container with token-divided rows.

Separated

Each item a separate rounded token card.

Filled

The open item gets a soft-token background.

Ghost

Borderless and minimal with a hover tint.

Plus

A token plus icon rotates to an x when open.

ai2 Styled accordion: 5 styled variations on the token system

The ai2 Styled accordion are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around collapsible content sections. 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 Styled accordion?

5 exports in one file: Bordered, Separated, Filled, Ghost and Plus. 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 Styled accordion 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.