Basic Accordion · Smooth UI

{
  "name": "@repo/basic-accordion",
  "description": "A BasicAccordion component for SmoothUI.",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@repo/shadcn-ui": "workspace:*",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "motion": "^12.23.25",
    "lucide-react": "^0.545.0"
  },
  "devDependencies": {
    "@repo/typescript-config": "workspace:*",
    "@types/react": "^19.2.2",
    "@types/react-dom": "^19.2.1",
    "typescript": "^5.9.3"
  },
  "smoothui": {
    "category": "basic-ui",
    "tags": [
      "accordion",
      "collapsible",
      "faq",
      "expand",
      "animated"
    ],
    "complexity": "simple",
    "animationType": "spring",
    "useCases": [
      "FAQ section with expandable answers",
      "Collapsible content sections for long pages",
      "Settings panel with grouped collapsible sections"
    ],
    "compositionHints": [
      "Use in FAQ blocks alongside reveal-text for section headings"
    ],
    "hasReducedMotion": true
  }
}

---
title: Accordion
description: Animated React accordion with smooth expand/collapse transitions. Accessible, keyboard-navigable FAQ component built on Radix UI with Motion animations.
icon: ChevronDown
dependencies:
  - lucide.dev
  - motion.dev
installer: basic-accordion
---

## Features

- Collapsible content sections
- Keyboard navigation support
- Customizable styling
- Single or multiple item selection
- Smooth animations
- Built on Radix UI Accordion

## Accessibility

### Keyboard Interactions

| Key | Description |
|-----|-------------|
| `Tab` | Moves focus to the next accordion header button |
| `Enter` / `Space` | Toggles the focused accordion item open or closed |

### ARIA Attributes

| Attribute | Element | Purpose |
|-----------|---------|---------|
| `aria-expanded` | Header button | Indicates whether the associated section is open or closed |
| `aria-controls` | Header button | References the `id` of the collapsible content region |
| `aria-labelledby` | Content region | References the `id` of the header button that controls it |
| `role="region"` | Content panel | Identifies the expandable content area as a landmark region |

### Screen Reader

- Each header button announces its expanded or collapsed state
- Content regions are associated with their header via `aria-labelledby`

### Reduced Motion

This component respects the `prefers-reduced-motion` media query via `useReducedMotion` from Motion. When reduced motion is preferred, expand/collapse and chevron rotation animations are disabled instantly.

## Props

<AutoTypeTable
  path="../../packages/smoothui/components/basic-accordion/index.tsx"
  name="BasicAccordionProps"
/>

"use client";

import { ChevronDown } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { useState } from "react";

const CHEVRON_ROTATION_DEGREES = 180;
const CHEVRON_ANIMATION_DURATION = 0.2;

export interface AccordionItem {
  content: React.ReactNode;
  id: string | number;
  title: string;
}

export interface BasicAccordionProps {
  allowMultiple?: boolean;
  className?: string;
  defaultExpandedIds?: Array<string | number>;
  items: AccordionItem[];
}

export default function BasicAccordion({
  items,
  allowMultiple = false,
  className = "",
  defaultExpandedIds = [],
}: BasicAccordionProps) {
  const [expandedItems, setExpandedItems] =
    useState<Array<string | number>>(defaultExpandedIds);
  const shouldReduceMotion = useReducedMotion();

  const toggleItem = (id: string | number) => {
    if (expandedItems.includes(id)) {
      setExpandedItems(expandedItems.filter((item) => item !== id));
    } else if (allowMultiple) {
      setExpandedItems([...expandedItems, id]);
    } else {
      setExpandedItems([id]);
    }
  };

  return (
    <div
      className={`flex w-full flex-col divide-y divide-border overflow-hidden rounded-lg border ${className}`}
    >
      {items.map((item) => {
        const isExpanded = expandedItems.includes(item.id);

        return (
          <div className="overflow-hidden" key={item.id}>
            <button
              aria-controls={`accordion-content-${item.id}`}
              aria-expanded={isExpanded}
              className="flex min-h-[44px] w-full cursor-pointer items-center justify-between gap-2 bg-background px-4 py-3 text-left transition-colors hover:bg-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
              id={`accordion-header-${item.id}`}
              onClick={() => toggleItem(item.id)}
              type="button"
            >
              <h3 className="font-medium">{item.title}</h3>
              <motion.div
                animate={{ rotate: isExpanded ? CHEVRON_ROTATION_DEGREES : 0 }}
                className="shrink-0"
                transition={{
                  duration: shouldReduceMotion ? 0 : CHEVRON_ANIMATION_DURATION,
                }}
              >
                <ChevronDown className="h-5 w-5" />
              </motion.div>
            </button>

            {/* Content stays mounted (height-animated, not unmounted) so the
                accordion keeps a stable width whether open or closed. `inert`
                removes collapsed content from tab order and the a11y tree. */}
            <motion.div
              animate={{
                height: isExpanded ? "auto" : 0,
                opacity: isExpanded ? 1 : 0,
              }}
              aria-labelledby={`accordion-header-${item.id}`}
              className="overflow-hidden"
              id={`accordion-content-${item.id}`}
              inert={!isExpanded}
              initial={false}
              role="region"
              transition={
                shouldReduceMotion
                  ? { duration: 0 }
                  : {
                      height: {
                        damping: 40,
                        duration: 0.25,
                        stiffness: 500,
                        type: "spring" as const,
                      },
                      opacity: { duration: 0.2 },
                    }
              }
            >
              <div className="border-t bg-background px-4 py-3">
                {item.content}
              </div>
            </motion.div>
          </div>
        );
      })}
    </div>
  );
}

@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";
@import "./smoothui.css";

@source "../node_modules/fumadocs-ui/dist/**/*.js";
@source "../node_modules/shadcn-ui/**/*.{js,jsx,ts,tsx}";
@source "../node_modules/@repo/*/**/*.{js,jsx,ts,tsx}";
@source "../../../packages/smoothui/components/**/*.{js,jsx,ts,tsx}";
@source "../../../packages/smoothui/blocks/**/*.{js,jsx,ts,tsx}";
@source "../../../packages/smoothui/templates/**/*.{js,jsx,ts,tsx}";

@theme inline {
  --font-body: var(--font-inter);
  --font-title: var(--font-plus-jakarta-sans);
  --shiki-theme: var(--shiki--light);
  --shiki--light: var(--shiki-theme);
  --shiki--dark: var(--shiki-theme);
  --shadow-custom: var(--shadow-custom);
  --shadow-custom-brand: var(--shadow-custom-brand);
}

:root {
  --color-bt-gray: var(--bt-gray);
  --color-contrast-higher: #fff;
  --color-contrast-highest: #fff;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --bt-gray: #e5e7eb;
  --shadow-custom-brand:
    0px 1px 2px rgba(0, 0, 0, 0.4),
    0px 0px 0px 1px var(--color-brand-secondary),
    inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
  --shadow-custom:
    0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
  --lines-page: url("/lines-b.png");
  --color-fd-primary: var(--color-brand);
  --color-fd-secondary: var(--color-smooth-50);
  /* Motion spine — match .cursor/rules/animations.mdc. Exit ~75% of enter;
     always honor prefers-reduced-motion. See .ui-craft/tokens.md. */
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
}

.dark {
  --bt-gray: black;
  --shadow-custom:
    0px -1px 0px 0px hsla(0, 0%, 100%, 0.06),
    0px 0px 0px 1px hsla(0, 0%, 100%, 0.06), 0px 0px 0px 1px #27272a,
    0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32);
  --lines-page: url("/lines-w.png");
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
  * {
    scrollbar-color: gray transparent;
    scrollbar-width: thin;
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground antialiased;
  }

  .dark {
    --shiki-theme: var(--shiki--dark);
    --shiki--light: var(--shiki-theme);
    --shiki--dark: var(--shiki-theme);
  }
  [data-theme="dark"] {
    --shiki-theme: var(--shiki--dark);
  }
  [data-theme="light"] {
    --shiki-theme: var(--shiki--light);
  }
}

::selection {
  @apply bg-brand-secondary/20 text-brand;
}

.shiki {
  box-shadow: none;
}

.gradient-brand {
  @apply from-brand-secondary to-brand bg-gradient-to-bl;
}
.hover\:gradient-brand:hover {
  @apply from-brand-secondary to-brand bg-gradient-to-bl;
}

/* Nucleo duo-tone: color-2 inherits parent icon color at reduced opacity */
[data-color="color-2"] {
  color: color-mix(in oklch, currentColor 25%, transparent);
}

/* Active sidebar items: color-2 uses brand tint */
[data-active="true"] [data-color="color-2"] {
  color: color-mix(in oklch, var(--color-brand) 35%, transparent);
}

.shadow-custom-btgray {
  box-shadow:
    0px 1px 2px rgba(0, 0, 0, 0.4),
    0px 0px 0px 1px var(--color-bt-gray),
    inset 0px 0.75px 0px rgba(255, 255, 255, 0.2);
}

.bg-lines-page {
  background-image: var(--lines-page);
  background-repeat: repeat;
}

[data-slot="dropdown-menu-item"] {
  @apply focus:bg-primary focus:border-border text-foreground border border-transparent;
}

.float-trigger {
  @apply text-foreground flex cursor-pointer flex-row items-center justify-center rounded-full border border-transparent px-4 py-2 text-sm font-medium outline-0;
}

.float-trigger:hover {
  @apply bg-primary border-border border;
}

.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  padding-inline-start: 1rem;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  list-style-type: disc;
}
.prose
  :where(ul > li):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  )::marker {
  color: var(--color-smooth-800);
}

.frame-box {
  @apply bg-primary inset-ring-background border inset-ring-2 before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(var(--dots-color)_1px,transparent_1px)] before:[background-size:16px_16px] before:[--dots-color:--alpha(var(--color-foreground)/5%)];
}

/* Price Flow Animations */
@keyframes slide-out-up {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes slide-out-down {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes slide-in-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes slide-in-down {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.slide-out-up {
  animation: slide-out-up 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.slide-out-down {
  animation: slide-out-down 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.slide-in-up {
  animation: slide-in-up 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.slide-in-down {
  animation: slide-in-down 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.prose
  :where(h1, h2, h3, h4, h5, h6):not(
    :where([class~="not-prose"], [class~="not-prose"] *)
  ) {
  @apply font-semibold text-foreground tracking-tight;
}
.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  @apply font-extrabold text-4xl leading-tight;
}
.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  @apply font-bold text-2xl leading-tight;
}
.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  @apply font-semibold text-xl leading-tight;
}
.prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  @apply font-semibold text-lg leading-tight;
}
.prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  @apply font-semibold text-base;
}
.prose :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  @apply font-semibold text-sm;
}
.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  @apply text-base;
}
.prose
  :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  @apply font-semibold;
}
.prose :where(.peer):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  @apply font-semibold;
}

/* Accordion Animations */
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

.animate-accordion-down {
  animation: accordion-down 0.2s ease-out;
}

.animate-accordion-up {
  animation: accordion-up 0.2s ease-out;
}

/* Center the docs content column within its (full-width) grid track,
   mirroring ElevenLabs' `w-content-width mx-auto` article. */
#nd-page {
  width: 100%;
  max-width: calc(900px + 2 * 2rem);
  margin-inline: auto;
}

/* Full pages (no TOC) stretch to the whole main track; also lift the
   *:max-w-[1285px] child cap fumadocs applies in full mode. Unlayered
   rules win over the layered utilities. */
#nd-page[data-full="true"] {
  max-width: none;
}

#nd-page[data-full="true"] > * {
  max-width: none;
}

/* Docs headings use the title font (Plus Jakarta Sans). */
#nd-page :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-title);
}

/* Override fumadocs utility classes on headings — unlayered beats @layer utilities */
#nd-page h1 {
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: var(--leading-tight);
}
#nd-page h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
}
#nd-page h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
}
#nd-page h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
}
#nd-page h5 {
  font-size: var(--text-base);
  font-weight: 600;
}
#nd-page h6 {
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ElevenLabs-style docs chrome: clean white surfaces + hairline borders,
   built from our own tokens (no hardcoded colors). */
#nd-notebook-layout,
#nd-sidebar {
  --fd-sidebar-width: 240px;
}

/* The fumadocs notebook container sets grid-template via inline style using
   `calc(var(--fd-layout-width,97rem) - sidebar - toc)` for the main track.
   Percentage values in CSS vars don't resolve against the grid container's
   inline size (circular), so the outer 1fr gutter columns end up non-zero
   even with --fd-layout-width:100%. Override the column template directly
   to collapse them to 0px.

   Mobile: sidebar is max-md:hidden but with collapsible:false collapsed=false
   always, so --fd-sidebar-col stays at 240px. Force column 2 to 0px on mobile
   so the hidden sidebar doesn't occupy grid space. */
@media (max-width: 767px) {
  #nd-notebook-layout {
    grid-template-columns: 0px 0px 1fr 0px 0px !important;
  }
}
@media (min-width: 768px) and (max-width: 1279px) {
  #nd-notebook-layout {
    grid-template-columns: 0px var(--fd-sidebar-col) 1fr var(--fd-toc-width) 0px !important;
  }

  #nd-notebook-layout:has(#nd-page[data-full="true"]) {
    grid-template-columns: 0px var(--fd-sidebar-col) 1fr 0px 0px !important;
  }
}

/* At xl+, always reserve 268px for the toc column so content width is identical
   on pages with and without a TOC. --fd-toc-width on #nd-notebook-layout itself
   is overridden by the [--fd-toc-width:0px] utility class on the same element,
   so hardcode the column value directly instead of relying on the variable.
   Exception: full pages (no TOC by design, e.g. the components gallery)
   collapse the toc column and let the main track take the whole width. */
@media (min-width: 1280px) {
  #nd-notebook-layout {
    grid-template-columns: 0px var(--fd-sidebar-col) 1fr 240px 0px !important;
  }

  #nd-notebook-layout:has(#nd-page[data-full="true"]) {
    grid-template-columns: 0px var(--fd-sidebar-col) 1fr 0px 0px !important;
  }
}

/* Top nav: solid surface instead of the translucent gray. The inner
   tabs row already carries its own border-b, so no border here. */
#nd-subnav {
  background-color: var(--color-background);
}

/* Sidebar: hairline separator from the content column. */
#nd-sidebar {
  border-inline-end: 1px solid var(--color-border);
}

/* Match TOC column width to sidebar (fumadocs default 268px → 240px).
   xl:layout:[--fd-toc-width:268px] sets it on #nd-notebook-layout via :has();
   this unlayered rule wins over @layer utilities. */
#nd-notebook-layout {
  --fd-toc-width: 240px;
}

/* Three sources of top gap in the sidebar when navMode="top" + collapsible=false:
   1. Header div (p-4 pb-2) has no visible content → collapse it
   2. ScrollViewport inner div has p-4 top padding → remove it
   3. Hidden lg:hidden menu items precede the first separator so first:mt-0 never
      fires and the separator keeps mt-6; pt-0 on the viewport absorbs that. */
#nd-sidebar > div:first-child {
  padding-block: 0 !important;
}
#nd-sidebar [data-radix-scroll-area-viewport] > div {
  padding-top: 0 !important;
}

/* Line numbers for the code explorer.
   Shiki already wraps every line in `.line`, so a CSS counter numbers them
   without re-parsing the highlighted output or shipping a transformer. */
.code-explorer-lines code {
  counter-reset: line;
}

.code-explorer-lines .line::before {
  display: inline-block;
  width: 2rem;
  margin-right: 1rem;
  color: var(--color-muted-foreground);
  text-align: right;
  /* Chrome puts generated content on the clipboard, so a hand-selected copy
     would come back with a line number glued to every line. */
  user-select: none;
  content: counter(line);
  counter-increment: line;
  opacity: 0.4;
}

/* Tailwind v4 dropped `cursor: pointer` from Preflight, so a `<button>` shows
   the arrow unless every call site says otherwise. Our own components declare
   it, but the chrome that comes from Fumadocs cannot — this covers it, and
   anything added later, in one place. Disabled controls keep the default. */
@layer base {
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]) {
    cursor: pointer;
  }
}

/* The navbar's sidebar collapse trigger, desktop only.
   The catalogue already has two ways in that read better: the breadcrumb on
   component, block and index pages, and the pointer reaching the left edge. A
   third control in the navbar meant the same sidebar was offered twice, and it
   was the one nobody used. The phone button stays — there it is the only way in,
   and it lives in a `md:hidden` container so this rule leaves it alone. */
@media (min-width: 768px) {
  #nd-subnav [aria-label="Collapse Sidebar"],
  #nd-subnav [aria-label="Expand Sidebar"] {
    display: none;
  }
}

{
  "name": "docs",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "build": "next build --turbopack",
    "counts": "tsx scripts/generate-counts.mts",
    "dev": "next dev --turbopack",
    "start": "next start",
    "typecheck": "fumadocs-mdx && _FUMADOCS_MDX=1 next typegen && tsc --noEmit"
  },
  "dependencies": {
    "@next/bundle-analyzer": "^16.0.7",
    "@orama/core": "^1.2.13",
    "@orama/orama": "^3.1.16",
    "@radix-ui/react-navigation-menu": "^1.2.14",
    "@radix-ui/react-slot": "^1.2.4",
    "@repo/shadcn-ui": "workspace:*",
    "@smoothui/data": "workspace:*",
    "@vercel/analytics": "^1.6.1",
    "@vercel/speed-insights": "^2.0.0",
    "@wandry/analytics-sdk": "^1.16.0",
    "class-variance-authority": "^0.7.1",
    "dialkit": "^0.2.1",
    "fumadocs-core": "^16.8.11",
    "fumadocs-docgen": "^3.0.10",
    "fumadocs-mdx": "^14.3.2",
    "fumadocs-twoslash": "^3.2.0",
    "fumadocs-typescript": "^5.2.6",
    "fumadocs-ui": "^16.8.11",
    "glob": "^13.0.6",
    "gsap": "^3.15.0",
    "jszip": "^3.10.1",
    "katex": "^0.16.25",
    "lucide-react": "^0.555.0",
    "motion": "^12.23.25",
    "next": "16.3.3",
    "next-themes": "^0.4.6",
    "nucleo-core-fill-24": "^1.1.3",
    "nucleo-social-media": "^1.0.2",
    "oxc-transform": "^0.126.0",
    "popmotion": "^11.0.3",
    "postcss-nested": "^7.0.2",
    "react": "^19.2.1",
    "react-dom": "^19.2.1",
    "react-resizable-panels": "^4.10.0",
    "react-use-measure": "^2.1.7",
    "rehype-katex": "^7.0.1",
    "remark": "^15.0.1",
    "remark-gfm": "^4.0.1",
    "remark-math": "^6.0.0",
    "remark-mdx": "^3.1.1",
    "remark-rehype": "^11.1.2",
    "shadcn": "^4.11.0",
    "shiki": "^4.0.2",
    "sonner": "^2.0.7",
    "tailwind-merge": "^3.3.1",
    "twoslash": "^0.3.4",
    "use-sound": "^5.0.0"
  },
  "devDependencies": {
    "@repo/typescript-config": "workspace:*",
    "@tailwindcss/postcss": "^4.1.15",
    "@types/hast": "^3.0.4",
    "@types/mdx": "^2.0.13",
    "@types/node": "^25.6.0",
    "@types/react": "^19.2.7",
    "@types/react-dom": "^19.2.3",
    "postcss": "^8.5.6",
    "tailwindcss": "^4.1.17",
    "ts-morph": "^28.0.0",
    "typescript": "^5.9.3"
  }
}

// Local host for the unchanged exact baseline demonstration.
import OriginalDemo from "./author-example.tsx";
export default function Demo() { return <><OriginalDemo /></>; }

/** Local sandbox host. Ready is a mount observation, never a verification result. */
import React, { Component, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

declare global {
  interface Window {
    __STYLEGALLERY_PREVIEW__: { id: string; status: string; errors: string[] };
  }
}

export function mount(Demo: React.ComponentType, id: string) {
  const state = window.__STYLEGALLERY_PREVIEW__ = { id, status: 'loading', errors: [] as string[] };
  const send = (message: object) => parent.postMessage({ ...message, id }, '*');
  const report = (error: unknown) => {
    const message = error instanceof Error ? error.message : String(error);
    if (!state.errors.includes(message)) state.errors.push(message);
    state.status = 'error';
    document.body.dataset.previewStatus = 'error';
    send({ type: 'sg-preview-error', message });
  };
  window.addEventListener('error', (event) => report(event.error ?? event.message));
  window.addEventListener('unhandledrejection', (event) => report(event.reason));
  window.addEventListener('securitypolicyviolation', (event) => report(`Blocked by preview policy: ${event.violatedDirective}`));
  const theme = new URLSearchParams(location.search).get('theme') === 'dark' ? 'dark' : 'light';
  document.documentElement.classList.toggle('dark', theme === 'dark');
  document.documentElement.dataset.theme = theme;
  // Keep original source bytes while ensuring imported attribution/navigation remains local text.
  const removeDestinations = () => document.querySelectorAll('a[href]').forEach((link) => {
    link.removeAttribute('href');
    link.removeAttribute('target');
  });
  document.addEventListener('click', (event) => {
    if ((event.target as Element)?.closest?.('a')) event.preventDefault();
  }, true);
  document.addEventListener('submit', (event) => event.preventDefault());
  new MutationObserver(removeDestinations).observe(document.getElementById('root')!, { childList: true, subtree: true });
  const observe = () => {
    const root = document.getElementById('root')!;
    const elements = Array.from(root.querySelectorAll('*'));
    const rect = root.getBoundingClientRect();
    const diagnostics = {
      textLength: (root.textContent ?? '').trim().length,
      elementCount: elements.length,
      visibleElementCount: elements.filter((element) => {
        const bounds = element.getBoundingClientRect();
        const style = getComputedStyle(element);
        return bounds.width > 0 && bounds.height > 0 && style.display !== 'none' && style.visibility !== 'hidden' && Number(style.opacity) !== 0;
      }).length,
      images: [],
      canvases: [],
      rootRect: { width: rect.width, height: rect.height },
      documentWidth: document.documentElement.scrollWidth,
      viewportWidth: innerWidth,
    };
    send({ type: 'sg-preview-observation', diagnostics });
  };
  class Boundary extends Component<{ children: React.ReactNode }, { error: string | null }> {
    state = { error: null as string | null };
    static getDerivedStateFromError(error: Error) { return { error: error.message }; }
    componentDidCatch(error: Error) { report(error); }
    render() { return this.state.error ? <p role="alert">This preview could not render: {this.state.error}</p> : this.props.children; }
  }
  function Ready() {
    useEffect(() => {
      const preference = matchMedia('(prefers-reduced-motion: reduce)');
      const syncSVG = () => document.querySelectorAll('svg').forEach((svg) => {
        if (preference.matches) svg.pauseAnimations?.();
        else svg.unpauseAnimations?.();
      });
      syncSVG();
      preference.addEventListener('change', syncSVG);
      let second = 0;
      let delayed = 0;
      const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => {
        if (state.status !== 'error') {
          state.status = 'mounted';
          document.body.dataset.previewStatus = 'mounted';
          send({ type: 'sg-preview-ready' });
          observe();
          delayed = window.setTimeout(observe, 700);
        }
      }); });
      return () => {
        cancelAnimationFrame(first);
        cancelAnimationFrame(second);
        clearTimeout(delayed);
        preference.removeEventListener('change', syncSVG);
      };
    }, []);
    return <Demo />;
  }
  createRoot(document.getElementById('root')!).render(<Boundary><Ready /></Boundary>);
}

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--background);
  --color-card-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--muted);
  --color-secondary-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--muted);
  --color-accent-foreground: var(--foreground);
  --color-popover: var(--background);
  --color-popover-foreground: var(--foreground);
  --color-destructive: #dc2626;
  --color-destructive-foreground: #ffffff;
  --color-input: var(--border);
  --color-border: var(--border);
  --color-ring: var(--foreground);
  --radius-lg: 0.5rem;
  --radius-md: 0.375rem;
  --radius-sm: 0.25rem;
}

:root {
  --background: #ffffff;
  --border: #d4d4d8;
  --foreground: #18181b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --primary: #18181b;
  --primary-foreground: #fafafa;
  background: var(--background);
  color: var(--foreground);
  color-scheme: light;
  font-family: Arial, sans-serif;
}

.dark {
  --background: #09090b;
  --border: #3f3f46;
  --foreground: #fafafa;
  --muted: #27272a;
  --muted-foreground: #a1a1aa;
  --primary: #fafafa;
  --primary-foreground: #18181b;
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
}

#root {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  width: 100%;
}

#root > * {
  max-width: 100%;
}

noscript {
  display: block;
  padding: 24px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-play-state: paused !important;
  }
}

react 19.2.3 — LICENSE

MIT License

Copyright (c) Meta Platforms, Inc. and affiliates.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


========================================================================

lucide-smooth 0.555.0 — LICENSE

ISC License

Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2023 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2025.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

---

The MIT License (MIT) (for portions derived from Feather)

Copyright (c) 2013-2023 Cole Bemis

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


========================================================================

framer-motion 12.43.0 — LICENSE.md

The MIT License (MIT)

Copyright (c) 2018 Framer B.V.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


========================================================================

motion-utils 12.39.0 — LICENSE.md

The MIT License (MIT)

Copyright (c) 2024 [Motion](https://motion.dev) B.V.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


========================================================================

motion-dom 12.43.0 — LICENSE.md

The MIT License (MIT)

Copyright (c) 2024 [Motion](https://motion.dev) B.V.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


========================================================================

motion 12.23.25 — LICENSE.md

The MIT License (MIT)

Copyright (c) 2024 [Motion](https://motion.dev) B.V.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


========================================================================

scheduler 0.27.0 — LICENSE

MIT License

Copyright (c) Meta Platforms, Inc. and affiliates.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


========================================================================

react-dom 19.2.3 — LICENSE

MIT License

Copyright (c) Meta Platforms, Inc. and affiliates.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


========================================================================

tailwindcss 4.1.13 — LICENSE

MIT License

Copyright (c) Tailwind Labs, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

{
  "id": "21st-469b8407e413",
  "sourceRevision": "df0453c967224a91d460aa3bd1786c737c2c95bc",
  "demoIdentity": {
    "file": "author-example.tsx",
    "export": "default",
    "source": "author-official-example"
  },
  "fidelity": {
    "preserved": "정확히 식별한 원래 BasicAccordion 구현과 해당 작성자가 MIT로 배포한 공식 예제; 원래 CDN demo의 license 빈 값은 별도 유지",
    "original_demo_license": "not-specified",
    "dependency_revision": "df0453c967224a91d460aa3bd1786c737c2c95bc",
    "observed_differences": [
      "원래 CDN의 license는 빈 문자열이므로 그 wrapper를 MIT라고 선언하거나 실행 entry로 재사용하지 않는다.",
      "작성자 MIT 공식 Example은 What is SmoothUI?/How do I install SmoothUI?/Can I customize the components?의 FAQ 문구를 쓰고 max-w-2xl/p-6/섹션 제목을 가진다. 원래 21st의 다른 세 질문과 max-w-xl/p-4 데모 wrapper와의 차이를 명시한다.",
      "현재 작성자 원본에는 useReducedMotion, inert, ARIA hooks가 있다. 원래 예제에 적힌 접근성 보장 문구를 검증 결과로 인용하지 않는다."
    ],
    "mapping": []
  },
  "acquisitionLimitations": [
    "CDN 데모는 SHA256으로, 작성자 원본과 의존 파일은 Git 커밋 및 blob SHA로 고정했다.",
    "현재 작성자 revision의 의존 파일이 과거 21st 내부 구현과 바이트 단위로 같다는 주장은 하지 않는다.",
    "다운로드한 코드를 실행하지 않았으며 브라우저·상호작용 검증은 별도 단계다."
  ],
  "files": [
    {
      "file": "author-example.tsx",
      "kind": "implementation",
      "sha256": "652a14e6e9cfe2fe19d24fe543741927f9992d5fce99f6a84e31150021e21eee",
      "sourceRevision": "df0453c967224a91d460aa3bd1786c737c2c95bc",
      "license": "MIT"
    },
    {
      "file": "LICENSE",
      "kind": "license",
      "sha256": "9877f4310c0549e5ce26affe52ba97c4e60325472bdcdd308a92fccd90f119cc",
      "sourceRevision": "df0453c967224a91d460aa3bd1786c737c2c95bc",
      "license": "MIT"
    },
    {
      "file": "upstream/packages/smoothui/components/basic-accordion/package.json",
      "kind": "upstream-implementation",
      "sha256": "cd8c963d1cae9ef93ee12088037e70f0aa2bd7824a4b695b0e5341c20b4a1b94",
      "sourceRevision": "df0453c967224a91d460aa3bd1786c737c2c95bc",
      "license": "MIT"
    },
    {
      "file": "upstream/apps/docs/content/docs/components/accordion.mdx",
      "kind": "upstream-implementation",
      "sha256": "6820c32788ca6917bc925e3ecc7c1accf63f00b29f9e84abeb760b9bc562e511",
      "sourceRevision": "df0453c967224a91d460aa3bd1786c737c2c95bc",
      "license": "MIT"
    },
    {
      "file": "author/packages/smoothui/components/basic-accordion/index.tsx",
      "kind": "implementation-dependency",
      "sha256": "ef0f685060fde49a375f6c28dc672d563a568c09ac7982d714cdae87eead135c",
      "sourceRevision": "df0453c967224a91d460aa3bd1786c737c2c95bc",
      "license": "MIT"
    },
    {
      "file": "author/apps/docs/app/global.css",
      "kind": "theme-source",
      "sha256": "0ddc5619e9ad6c95cb146aa69e6c3f142879cf5ecbac459289557cd47c3e81d8",
      "sourceRevision": "df0453c967224a91d460aa3bd1786c737c2c95bc",
      "license": "MIT"
    },
    {
      "file": "author/apps/docs/package.json",
      "kind": "dependency-manifest",
      "sha256": "476f7dd85312e94f625782451f0125f9e745effa939a58f3c5fb91d7555cd8ba",
      "sourceRevision": "df0453c967224a91d460aa3bd1786c737c2c95bc",
      "license": "MIT"
    }
  ],
  "importMap": {
    "@repo/smoothui/components/basic-accordion": "author/packages/smoothui/components/basic-accordion/index.tsx"
  },
  "declaredDependencies": {
    "lucide-react": "^0.555.0",
    "motion": "^12.23.25",
    "react": "^19.2.1"
  },
  "runtimeDependencies": {
    "react": "19.2.3",
    "lucide-smooth": "0.555.0",
    "framer-motion": "12.43.0",
    "motion-utils": "12.39.0",
    "motion-dom": "12.43.0",
    "motion": "12.23.25",
    "scheduler": "0.27.0",
    "react-dom": "19.2.3",
    "tailwindcss": "4.1.13"
  },
  "packageAliases": {
    "lucide-react": "lucide-smooth"
  },
  "assets": [],
  "assetAdaptations": [],
  "adaptations": [
    "The exact author component is preserved. The baseline CDN demo had no license declaration, so the same author's official MIT example is the runtime entry; the unauthorized baseline is not redistributed.",
    "The official example has three FAQ items, a heading, max-w-2xl and p-6. Its copy and spacing differ from the historical 21st max-w-xl p-4 demo, and that identity difference is explicit.",
    "Both examples use allowMultiple=true and defaultExpandedIds=[1]. Reduced-motion handling and inert collapsed content are original component behavior. Local fallback theme tokens are host support."
  ],
  "runtime_verified": false
}

# Basic Accordion · Smooth UI

The acquired original files are unchanged. Source revision: df0453c967224a91d460aa3bd1786c737c2c95bc. Each exact file hash and any demo content revision is recorded in provenance.json. Keep all included license notices.

- The exact author component is preserved. The baseline CDN demo had no license declaration, so the same author's official MIT example is the runtime entry; the unauthorized baseline is not redistributed.
- The official example has three FAQ items, a heading, max-w-2xl and p-6. Its copy and spacing differ from the historical 21st max-w-xl p-4 demo, and that identity difference is explicit.
- Both examples use allowMultiple=true and defaultExpandedIds=[1]. Reduced-motion handling and inert collapsed content are original component behavior. Local fallback theme tokens are host support.
- Host spacing and fallback tokens come from runtime/author-styles.css. These tokens are local integration support, not original design-system defaults.

Open the standalone HTML to run with all JavaScript and CSS bundled locally. ?theme=light and ?theme=dark select the host theme. The parent gallery must use an opaque allow-scripts sandbox. No external requests are required.

For source reuse, start with Usage.tsx and the unchanged baseline demonstration. Resolve @/ imports to their included matching author files and install the exact package versions in provenance.json. The host mount and styles are supplied for reference.

Build success and the ready message do not prove runtime or accessibility behavior. Browser validation is recorded separately.