{"loaderData":{"0":null,"component":{"source":{"state":"ready","data":{"code":"import { useId, useRef, useState } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { ChevronDown } from 'lucide-react';\nimport './Accordion.css';\n\nconst join = (...classes) => classes.filter(Boolean).join(' ');\n\n// An animated disclosure list: each panel collapses its height to zero and the\n// chevron rotates as it closes. `singleOpen` keeps just one panel open at a time;\n// Arrow/Home/End move focus between headers. Inspired by the WAI-ARIA accordion\n// pattern as refined by libraries like Radix UI.\nexport default function Accordion({\n items = [],\n singleOpen = true,\n defaultOpen = 0,\n accentColor = '#6366f1',\n className = '',\n ...rest\n}) {\n const prefersReduced = useReducedMotion();\n const uid = useId();\n const headersRef = useRef([]);\n const [openSet, setOpenSet] = useState(() => new Set(defaultOpen != null && defaultOpen >= 0 ? [defaultOpen] : []));\n\n const toggle = index => {\n setOpenSet(prev => {\n const next = new Set(singleOpen ? [] : prev);\n if (prev.has(index)) next.delete(index);\n else next.add(index);\n return next;\n });\n };\n\n const handleKeyDown = (event, index) => {\n const last = items.length - 1;\n let target;\n switch (event.key) {\n case 'ArrowDown':\n target = index === last ? 0 : index + 1;\n break;\n case 'ArrowUp':\n target = index === 0 ? last : index - 1;\n break;\n case 'Home':\n target = 0;\n break;\n case 'End':\n target = last;\n break;\n default:\n return;\n }\n event.preventDefault();\n headersRef.current[target]?.focus();\n };\n\n return (\n

\n {items.map((item, index) => {\n const open = openSet.has(index);\n const headerId = `${uid}-header-${index}`;\n const panelId = `${uid}-panel-${index}`;\n return (\n

\n (headersRef.current[index] = el)}\n id={headerId}\n type=\"button\"\n className=\"accordion-trigger\"\n aria-expanded={open}\n aria-controls={panelId}\n onClick={() => toggle(index)}\n onKeyDown={event => handleKeyDown(event, index)}\n >\n \n {item.title}\n \n \n \n \n \n

\n \n

\n {item.content}\n

\n \n

\n );\n })}\n

\n );\n}\n","css":".accordion-root {\n width: min(440px, 100%);\n display: flex;\n flex-direction: column;\n border: 1px solid rgba(255, 255, 255, 0.12);\n border-radius: 14px;\n background: rgba(255, 255, 255, 0.03);\n overflow: hidden;\n font-family: inherit;\n}\n\n.accordion-item {\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.accordion-item:last-child {\n border-bottom: none;\n}\n\n.accordion-heading {\n margin: 0;\n font-size: inherit;\n font-weight: inherit;\n}\n\n.accordion-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n width: 100%;\n padding: 1.05rem 1.25rem;\n border: none;\n background: transparent;\n color: #fafafa;\n font-family: inherit;\n font-size: 0.95rem;\n font-weight: 600;\n text-align: left;\n cursor: pointer;\n outline: none;\n transition: background 0.2s ease;\n -webkit-tap-highlight-color: transparent;\n}\n\n.accordion-trigger:hover {\n background: rgba(255, 255, 255, 0.04);\n}\n\n.accordion-trigger:focus-visible {\n box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);\n}\n\n.accordion-title {\n transition: color 0.2s ease;\n}\n\n.accordion-chevron {\n display: inline-flex;\n flex-shrink: 0;\n line-height: 0;\n color: #a6a6a6;\n}\n\n.accordion-content {\n padding: 0 1.25rem 1.15rem;\n color: #b5b5b5;\n font-size: 0.9rem;\n line-height: 1.6;\n}\n","tailwind":"import { useId, useRef, useState } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { ChevronDown } from 'lucide-react';\n\nconst join = (...classes) => classes.filter(Boolean).join(' ');\n\n// An animated disclosure list: each panel collapses its height to zero and the\n// chevron rotates as it closes. `singleOpen` keeps just one panel open at a time;\n// Arrow/Home/End move focus between headers. Inspired by the WAI-ARIA accordion\n// pattern as refined by libraries like Radix UI.\nexport default function Accordion({\n items = [],\n singleOpen = true,\n defaultOpen = 0,\n accentColor = '#6366f1',\n className = '',\n ...rest\n}) {\n const prefersReduced = useReducedMotion();\n const uid = useId();\n const headersRef = useRef([]);\n const [openSet, setOpenSet] = useState(() => new Set(defaultOpen != null && defaultOpen >= 0 ? [defaultOpen] : []));\n\n const toggle = index => {\n setOpenSet(prev => {\n const next = new Set(singleOpen ? [] : prev);\n if (prev.has(index)) next.delete(index);\n else next.add(index);\n return next;\n });\n };\n\n const handleKeyDown = (event, index) => {\n const last = items.length - 1;\n let target;\n switch (event.key) {\n case 'ArrowDown':\n target = index === last ? 0 : index + 1;\n break;\n case 'ArrowUp':\n target = index === 0 ? last : index - 1;\n break;\n case 'Home':\n target = 0;\n break;\n case 'End':\n target = last;\n break;\n default:\n return;\n }\n event.preventDefault();\n headersRef.current[target]?.focus();\n };\n\n return (\n \n {items.map((item, index) => {\n const open = openSet.has(index);\n const headerId = `${uid}-header-${index}`;\n const panelId = `${uid}-panel-${index}`;\n return (\n

\n (headersRef.current[index] = el)}\n id={headerId}\n type=\"button\"\n className=\"flex w-full cursor-pointer items-center justify-between gap-4 border-none bg-transparent px-5 py-[1.05rem] text-left text-[0.95rem] font-semibold text-[#fafafa] outline-none transition-[background] duration-200 [-webkit-tap-highlight-color:transparent] hover:bg-white/[0.04] focus-visible:shadow-[inset_0_0_0_2px_rgba(255,255,255,0.4)]\"\n aria-expanded={open}\n aria-controls={panelId}\n onClick={() => toggle(index)}\n onKeyDown={event => handleKeyDown(event, index)}\n >\n \n {item.title}\n \n \n \n \n \n

\n \n

\n {item.content}\n

\n \n

\n );\n })}\n \n );\n}\n","tsCode":"import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { ChevronDown } from 'lucide-react';\nimport './Accordion.css';\n\nconst join = (...classes: (string | false | undefined)[]) => classes.filter(Boolean).join(' ');\n\nexport interface AccordionItem {\n title: ReactNode;\n content: ReactNode;\n}\n\nexport interface AccordionProps {\n items?: AccordionItem[];\n singleOpen?: boolean;\n defaultOpen?: number | null;\n accentColor?: string;\n className?: string;\n}\n\n// An animated disclosure list: each panel collapses its height to zero and the\n// chevron rotates as it closes. `singleOpen` keeps just one panel open at a time;\n// Arrow/Home/End move focus between headers. Inspired by the WAI-ARIA accordion\n// pattern as refined by libraries like Radix UI.\nexport default function Accordion({\n items = [],\n singleOpen = true,\n defaultOpen = 0,\n accentColor = '#6366f1',\n className = '',\n ...rest\n}: AccordionProps) {\n const prefersReduced = useReducedMotion();\n const uid = useId();\n const headersRef = useRef<(HTMLButtonElement | null)[]>([]);\n const [openSet, setOpenSet] = useState>(\n () => new Set(defaultOpen != null && defaultOpen >= 0 ? [defaultOpen] : [])\n );\n\n const toggle = (index: number) => {\n setOpenSet(prev => {\n const next = new Set(singleOpen ? [] : prev);\n if (prev.has(index)) next.delete(index);\n else next.add(index);\n return next;\n });\n };\n\n const handleKeyDown = (event: KeyboardEvent, index: number) => {\n const last = items.length - 1;\n let target: number;\n switch (event.key) {\n case 'ArrowDown':\n target = index === last ? 0 : index + 1;\n break;\n case 'ArrowUp':\n target = index === 0 ? last : index - 1;\n break;\n case 'Home':\n target = 0;\n break;\n case 'End':\n target = last;\n break;\n default:\n return;\n }\n event.preventDefault();\n headersRef.current[target]?.focus();\n };\n\n return (\n

\n {items.map((item, index) => {\n const open = openSet.has(index);\n const headerId = `${uid}-header-${index}`;\n const panelId = `${uid}-panel-${index}`;\n return (\n

\n (headersRef.current[index] = el)}\n id={headerId}\n type=\"button\"\n className=\"accordion-trigger\"\n aria-expanded={open}\n aria-controls={panelId}\n onClick={() => toggle(index)}\n onKeyDown={event => handleKeyDown(event, index)}\n >\n \n {item.title}\n \n \n \n \n \n

\n \n

\n {item.content}\n

\n \n

\n );\n })}\n

\n );\n}\n","tsTailwind":"import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { ChevronDown } from 'lucide-react';\n\nconst join = (...classes: (string | false | undefined)[]) => classes.filter(Boolean).join(' ');\n\nexport interface AccordionItem {\n title: ReactNode;\n content: ReactNode;\n}\n\nexport interface AccordionProps {\n items?: AccordionItem[];\n singleOpen?: boolean;\n defaultOpen?: number | null;\n accentColor?: string;\n className?: string;\n}\n\n// An animated disclosure list: each panel collapses its height to zero and the\n// chevron rotates as it closes. `singleOpen` keeps just one panel open at a time;\n// Arrow/Home/End move focus between headers. Inspired by the WAI-ARIA accordion\n// pattern as refined by libraries like Radix UI.\nexport default function Accordion({\n items = [],\n singleOpen = true,\n defaultOpen = 0,\n accentColor = '#6366f1',\n className = '',\n ...rest\n}: AccordionProps) {\n const prefersReduced = useReducedMotion();\n const uid = useId();\n const headersRef = useRef<(HTMLButtonElement | null)[]>([]);\n const [openSet, setOpenSet] = useState>(\n () => new Set(defaultOpen != null && defaultOpen >= 0 ? [defaultOpen] : [])\n );\n\n const toggle = (index: number) => {\n setOpenSet(prev => {\n const next = new Set(singleOpen ? [] : prev);\n if (prev.has(index)) next.delete(index);\n else next.add(index);\n return next;\n });\n };\n\n const handleKeyDown = (event: KeyboardEvent, index: number) => {\n const last = items.length - 1;\n let target: number;\n switch (event.key) {\n case 'ArrowDown':\n target = index === last ? 0 : index + 1;\n break;\n case 'ArrowUp':\n target = index === 0 ? last : index - 1;\n break;\n case 'Home':\n target = 0;\n break;\n case 'End':\n target = last;\n break;\n default:\n return;\n }\n event.preventDefault();\n headersRef.current[target]?.focus();\n };\n\n return (\n \n {items.map((item, index) => {\n const open = openSet.has(index);\n const headerId = `${uid}-header-${index}`;\n const panelId = `${uid}-panel-${index}`;\n return (\n

\n (headersRef.current[index] = el)}\n id={headerId}\n type=\"button\"\n className=\"flex w-full cursor-pointer items-center justify-between gap-4 border-none bg-transparent px-5 py-[1.05rem] text-left text-[0.95rem] font-semibold text-[#fafafa] outline-none transition-[background] duration-200 [-webkit-tap-highlight-color:transparent] hover:bg-white/[0.04] focus-visible:shadow-[inset_0_0_0_2px_rgba(255,255,255,0.4)]\"\n aria-expanded={open}\n aria-controls={panelId}\n onClick={() => toggle(index)}\n onKeyDown={event => handleKeyDown(event, index)}\n >\n \n {item.title}\n \n \n \n \n \n

\n \n

\n {item.content}\n

\n \n

\n );\n })}\n \n );\n}\n"},"componentId":"accordion"}}},"actionData":null,"errors":null}

Accordion

What is ui bits?

How are components delivered?

Can I customize the animations?