{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "exclusive-accordion", "type": "registry:ui", "title": "Exclusive Accordion", "description": "Scriptless single-open accordion: multiple native
elements share one `name` attribute so opening one auto-closes the others — the pure-HTML exclusive variant of the APG-scripted accordion. Zero JavaScript; the exclusivity survives with JS disabled. Ships in five flavours: Hono JSX (TypeScript), Jinja2 macros, Go html/template, Phoenix function component, and a raw HTML snippet.", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ui/exclusive-accordion.tsx", "type": "registry:ui", "target": "components/ui/exclusive-accordion.tsx", "content": "/** @jsxImportSource hono/jsx */\nimport type { PropsWithChildren } from \"hono/jsx\"\nimport { cn, type ClassValue } from \"@/registry/lib/cn\"\n\n// Exclusive Accordion — shadcn-htmx, htmx v4 + Tailwind v4.\n//\n// The scriptless, single-open accordion. Several
elements share one\n// `name` attribute, so the browser keeps exactly one open at a time: opening\n// any item auto-closes the others. This is the pure-HTML exclusive variant of\n// the APG-scripted accordion — ZERO JavaScript, no boot script, no site.js.\n//\n// shadcn upstream uses Radix Accordion (a JS state machine wiring buttons +\n// regions with aria-expanded / aria-controls). We let the platform do it:\n// - Click / Space / Enter toggles open (browser default on ).\n// - is implicitly role=\"button\", focusable, with its text as the\n// accessible name; the browser sets aria-expanded to mirror `open`.\n// -
makes the group mutually exclusive natively. Per the\n// HTML spec, if more than one grouped item carries `open`, only the FIRST\n// in source order renders open — so we never produce an invalid state.\n//\n// This component differs from registry/ui/accordion.tsx (type=\"single\"), which\n// assigns the grouping `name` at runtime via public/site.js and layers the APG\n// arrow-key contract on top. ExclusiveAccordion renders the `name` straight\n// into the server HTML, so the exclusivity survives with JS disabled and there\n// is no keyboard contract beyond what ships natively (Tab to focus,\n// Enter / Space to toggle). That makes it the right pick for progressive-\n// enhancement-first surfaces (docs FAQs, server-rendered settings panels).\n//\n// Refs:\n// repos/mdn/files/en-us/web/html/reference/elements/details/index.md\n// (`name` attribute — \"give multiple
the same name value to\n// group them. Only one of the grouped
can be open at a time …\n// if multiple are given `open`, only the first in source order renders\n// open.\" Also: `open` boolean, the `toggle` event, implicit role=group.)\n// repos/mdn/files/en-us/web/html/reference/elements/summary/index.md\n// (click / Space toggles parent
; display:list-item marker.)\n// repos/aria-practices/content/patterns/accordion/ (the scripted contract we\n// deliberately do NOT emulate here — see the note above.)\n// repos/aria-practices/content/patterns/disclosure/ (native
is a\n// disclosure widget; aria-controls is optional.)\n\ntype ExclusiveAccordionProps = PropsWithChildren<{\n // Shared group name written onto every item's
. Required —\n // it is what makes the group exclusive. Distinct accordions on one page\n // must use distinct names or they'd close each other.\n name: string\n class?: ClassValue\n}>\n\nexport function ExclusiveAccordion(props: ExclusiveAccordionProps) {\n const { name, class: className, children, ...rest } = props\n return (\n \n {children}\n \n )\n}\n\ntype ExclusiveAccordionItemProps = PropsWithChildren<{\n // The shared group name. Pass the SAME value as the parent's `name`.\n name: string\n // Distinct identifier per item, emitted as data-value for targeting.\n value?: string\n // Pre-open this item on initial render. If two items in the group set this,\n // the browser opens only the first in source order (HTML spec).\n open?: boolean\n disabled?: boolean\n class?: ClassValue\n}>\n\nexport function ExclusiveAccordionItem(props: ExclusiveAccordionItemProps) {\n const { name, value, open, disabled, class: className, children, ...rest } =\n props\n return (\n \n {children}\n
\n )\n}\n\ntype ExclusiveAccordionTriggerProps = PropsWithChildren<{ class?: ClassValue }>\n\nexport function ExclusiveAccordionTrigger(\n props: ExclusiveAccordionTriggerProps,\n) {\n const { class: className, children, ...rest } = props\n return (\n is open.\n \"[details[open]>&_[data-slot=exclusive-accordion-chevron]]:rotate-180\",\n className,\n )}\n {...rest}\n >\n {children}\n \n \n \n
\n )\n}\n\ntype ExclusiveAccordionContentProps = PropsWithChildren<{ class?: ClassValue }>\n\nexport function ExclusiveAccordionContent(\n props: ExclusiveAccordionContentProps,\n) {\n const { class: className, children, ...rest } = props\n return (\n \n {children}\n \n )\n}\n" }, { "path": "registry/jinja2/exclusive-accordion.html", "type": "registry:file", "target": "templates/components/exclusive-accordion.html", "content": "{# Exclusive Accordion macros — shadcn-htmx, htmx v4 + Tailwind v4.\n Mirrors registry/ui/exclusive-accordion.tsx EXACTLY.\n\n The scriptless single-open accordion: every
shares one `name`\n attribute, so the browser keeps exactly one open at a time — opening one\n auto-closes the others. ZERO JavaScript: no boot script, no site.js. Per\n the HTML spec, if multiple grouped items carry `open`, only the first in\n source order renders open.\n\n Ref: repos/mdn/files/en-us/web/html/reference/elements/details/index.md (name)\n\n Usage:\n {% from \"components/exclusive-accordion.html\" import\n exclusive_accordion_open, exclusive_accordion_close,\n exclusive_accordion_item_open, exclusive_accordion_item_close,\n exclusive_accordion_trigger,\n exclusive_accordion_content_open, exclusive_accordion_content_close %}\n\n {{ exclusive_accordion_open(name=\"faq\") }}\n {{ exclusive_accordion_item_open(name=\"faq\", value=\"q1\", open=true) }}\n {{ exclusive_accordion_trigger(\"What's htmx?\") }}\n {{ exclusive_accordion_content_open() }}\n Hypermedia-driven HTML extensions.\n {{ exclusive_accordion_content_close() }}\n {{ exclusive_accordion_item_close() }}\n {{ exclusive_accordion_close() }} #}\n\n{% macro exclusive_accordion_open(name, extra_class=\"\") -%}\n
\n{%- endmacro %}\n\n{% macro exclusive_accordion_close() %}
{% endmacro %}\n\n{% macro exclusive_accordion_item_open(name, value=\"\", open=false, disabled=false, extra_class=\"\") -%}\n
\n{%- endmacro %}\n\n{% macro exclusive_accordion_item_close() %}
{% endmacro %}\n\n{% macro exclusive_accordion_trigger(text, extra_class=\"\") -%}\n&_[data-slot=exclusive-accordion-chevron]]:rotate-180 {{ extra_class }}\">\n {{ text }}\n \n \n \n\n{%- endmacro %}\n\n{% macro exclusive_accordion_content_open(extra_class=\"\") -%}\n
\n{%- endmacro %}\n\n{% macro exclusive_accordion_content_close() %}
{% endmacro %}\n" }, { "path": "registry/go-templates/exclusive-accordion.tmpl", "type": "registry:file", "target": "components/exclusive-accordion.tmpl", "content": "{{/*\n Exclusive Accordion templates — shadcn-htmx, htmx v4 + Tailwind v4.\n Mirrors registry/ui/exclusive-accordion.tsx EXACTLY.\n\n The scriptless single-open accordion: every
shares one `name`\n attribute, so the browser keeps exactly one open at a time — opening one\n auto-closes the others. ZERO JavaScript. Per the HTML spec, if multiple\n grouped items carry `open`, only the first in source order renders open.\n\n Ref: repos/mdn/files/en-us/web/html/reference/elements/details (name)\n\n Three named templates compose:\n - \"exclusive_accordion\" — wrapper open/close (call with Name + Body)\n - \"exclusive_accordion_item\" — single
with summary + content\n - \"exclusive_accordion_trigger\" — just the (when composing manually)\n\n Usage:\n {{template \"exclusive_accordion\" (dict\n \"Name\" \"faq\"\n \"Body\" (htmlSafe `\n {{template \"exclusive_accordion_item\" (dict\n \"Name\" \"faq\" \"Value\" \"q1\" \"Title\" \"What's htmx?\" \"Open\" true\n \"Body\" (htmlSafe \"Hypermedia-driven HTML extensions.\")\n )}}`)\n )}}\n*/}}\n\n{{define \"exclusive_accordion\"}}\n
\n {{.Body}}\n
\n{{end}}\n\n{{define \"exclusive_accordion_item\"}}\n
\n {{template \"exclusive_accordion_trigger\" (dict \"Text\" .Title)}}\n
{{.Body}}
\n
\n{{end}}\n\n{{define \"exclusive_accordion_trigger\"}}\n&_[data-slot=exclusive-accordion-chevron]]:rotate-180\">\n {{.Text}}\n \n \n \n\n{{end}}\n" }, { "path": "registry/phoenix/exclusive_accordion.ex", "type": "registry:file", "target": "lib/my_app_web/components/exclusive_accordion.ex", "content": "defmodule ShadcnHtmx.Components.ExclusiveAccordion do\n @moduledoc \"\"\"\n Exclusive Accordion — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.\n Mirrors registry/ui/exclusive-accordion.tsx EXACTLY.\n\n The scriptless single-open accordion. Several `
` elements share one\n `name` attribute, so the browser keeps exactly one open at a time — opening\n one auto-closes the others. ZERO JavaScript: no boot script, no site.js. Per\n the HTML spec, if multiple grouped items carry `open`, only the first in\n source order renders open.\n\n Ref: repos/mdn/files/en-us/web/html/reference/elements/details (name)\n\n ## Examples\n\n <.exclusive_accordion name=\"faq\">\n <.exclusive_accordion_item name=\"faq\" value=\"q1\" open>\n <.exclusive_accordion_trigger>What's htmx?\n <.exclusive_accordion_content>Hypermedia-driven HTML extensions.\n \n \n \"\"\"\n\n use Phoenix.Component\n\n attr :name, :string, required: true\n attr :class, :string, default: nil\n slot :inner_block, required: true\n\n def exclusive_accordion(assigns) do\n ~H\"\"\"\n \n {render_slot(@inner_block)}\n \n \"\"\"\n end\n\n attr :name, :string, required: true\n attr :value, :string, default: nil\n attr :open, :boolean, default: false\n attr :disabled, :boolean, default: false\n attr :class, :string, default: nil\n slot :inner_block, required: true\n\n def exclusive_accordion_item(assigns) do\n ~H\"\"\"\n \n {render_slot(@inner_block)}\n
\n \"\"\"\n end\n\n attr :class, :string, default: nil\n slot :inner_block, required: true\n\n def exclusive_accordion_trigger(assigns) do\n ~H\"\"\"\n &_[data-slot=exclusive-accordion-chevron]]:rotate-180\",\n @class\n ]}\n >\n {render_slot(@inner_block)}\n \n \n \n \n \"\"\"\n end\n\n attr :class, :string, default: nil\n slot :inner_block, required: true\n\n def exclusive_accordion_content(assigns) do\n ~H\"\"\"\n
\n {render_slot(@inner_block)}\n
\n \"\"\"\n end\nend\n" }, { "path": "registry/html/exclusive-accordion.html", "type": "registry:file", "target": "snippets/exclusive-accordion.html", "content": "\n\n
\n\n
\n &_[data-slot=exclusive-accordion-chevron]]:rotate-180\">\n What's htmx?\n \n \n \n \n
\n A small library that turns any HTML attribute into an AJAX trigger — no JSON, no client framework needed.\n
\n
\n\n
\n &_[data-slot=exclusive-accordion-chevron]]:rotate-180\">\n Why pair it with Tailwind v4?\n \n \n \n \n
\n Utility-first CSS keeps the markup self-explanatory and the bundle small.\n
\n
\n\n
\n &_[data-slot=exclusive-accordion-chevron]]:rotate-180\">\n Does it work without JavaScript?\n \n \n \n \n
\n Yes — the exclusivity is the native <details name> grouping. Zero script required.\n
\n
\n
\n" } ] }