{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "Collapsible stacked sections. Native
/ + new HTML name attribute for zero-JS exclusive accordion. APG keyboard nav in site.js.", "files": [ { "path": "registry/ui/accordion.tsx", "type": "registry:ui", "target": "components/ui/accordion.tsx", "content": "/** @jsxImportSource hono/jsx */\nimport type { PropsWithChildren } from \"hono/jsx\"\nimport { cn, type ClassValue } from \"@/registry/lib/cn\"\n\n// Accordion — shadcn-htmx, htmx v4 + Tailwind v4.\n//\n// shadcn upstream uses Radix Accordion. We use the native HTML\n//
......
\n// so the platform gives us:\n// - Click / Space / Enter toggles open (browser default).\n// - aria-expanded mirrors the open attribute (browser-set on ).\n// - is implicitly role=\"button\" with accessible name from text.\n//\n// Native `
` attribute (HTML Living Standard) makes the\n// group exclusive — opening one item closes the others, no JS required.\n// We use that for `type=\"single\"`. For `type=\"multiple\"` (the default) we\n// omit the name attribute and every item can be expanded independently.\n//\n// Public/site.js adds the APG keyboard contract on top:\n// - Down/Up Arrow: move focus between summaries in the same accordion.\n// - Home / End: focus first / last summary.\n//\n// Refs:\n// repos/mdn/files/en-us/web/html/reference/elements/details/index.md\n// repos/mdn/files/en-us/web/html/reference/elements/summary/index.md\n// repos/aria-practices/content/patterns/accordion/\n\nexport type AccordionType = \"single\" | \"multiple\"\n\ntype AccordionProps = PropsWithChildren<{\n // Required so the exclusive-accordion `name` attribute can scope items.\n id: string\n type?: AccordionType\n class?: ClassValue\n}>\n\nexport function Accordion(props: AccordionProps) {\n const { id, type = \"multiple\", class: className, children } = props\n return (\n \n {children}\n \n )\n}\n\ntype AccordionItemProps = PropsWithChildren<{\n // Distinct value per item. Emitted as the `data-value` attribute so each\n // item is individually identifiable; the boot script does not derive any\n // aria-controls wiring from it. (Native
/ is a disclosure\n // widget where aria-controls is optional per the WAI-ARIA Disclosure\n // pattern — repos/aria-practices/content/patterns/disclosure/.)\n value: string\n // Pre-open this item on initial render.\n open?: boolean\n disabled?: boolean\n class?: ClassValue\n}>\n\nexport function AccordionItem(props: AccordionItemProps) {\n const { value, open, disabled, class: className, children, ...rest } = props\n return (\n just after open/close) can drive zero-JS lazy loading,\n // e.g. hx-trigger=\"toggle once\" hx-get=...\n // repos/mdn/files/en-us/web/api/htmlelement/toggle_event/index.md\n // repos/htmx hx-trigger: accepts any DOM event.\n {...rest}\n >\n {children}\n
\n )\n}\n\ntype AccordionTriggerProps = PropsWithChildren<{ class?: ClassValue }>\n\nexport function AccordionTrigger(props: AccordionTriggerProps) {\n const { class: className, children, ...rest } = props\n return (\n is open.\n \"[details[open]>&_[data-slot=accordion-chevron]]:rotate-180\",\n className,\n )}\n // Forward hx-* / global attributes onto the control.\n {...rest}\n >\n {children}\n \n \n \n \n )\n}\n\ntype AccordionContentProps = PropsWithChildren<{ class?: ClassValue }>\n\nexport function AccordionContent(props: AccordionContentProps) {\n const { class: className, children, ...rest } = props\n return (\n ,\n // or hx-* directly here. repos/htmx hx-trigger accepts any DOM event.\n {...rest}\n >\n {children}\n \n )\n}\n" }, { "path": "registry/jinja2/accordion.html", "type": "registry:file", "target": "templates/components/accordion.html", "content": "{# Accordion macros — shadcn-htmx, htmx v4 + Tailwind v4.\n Mirrors registry/ui/accordion.tsx. Native
/; the boot\n script in public/site.js wires the `name` attribute for type=\"single\"\n (browser-native exclusive accordion) and the APG keyboard contract.\n\n Usage:\n {% from \"components/accordion.html\" import accordion_open, accordion_close,\n accordion_item_open, accordion_item_close,\n accordion_trigger, accordion_content_open, accordion_content_close %}\n\n {{ accordion_open(id=\"faq\", type=\"single\") }}\n {{ accordion_item_open(value=\"q1\", open=true) }}\n {{ accordion_trigger(\"What's htmx?\") }}\n {{ accordion_content_open() }}\n Hypermedia-driven HTML extensions.\n {{ accordion_content_close() }}\n {{ accordion_item_close() }}\n {{ accordion_close() }} #}\n\n{% macro accordion_open(id, type=\"multiple\", extra_class=\"\") -%}\n
\n{%- endmacro %}\n\n{% macro accordion_close() %}
{% endmacro %}\n\n{# attrs forwards hx-* / global attributes so the native
`toggle`\n event can drive zero-JS lazy loading (hx-trigger=\"toggle once\" hx-get=...);\n toggle event fires just after open/close; hx-trigger accepts any DOM event. #}\n{% macro accordion_item_open(value, open=false, disabled=false, extra_class=\"\", attrs={}) -%}\n
\n{%- endmacro %}\n\n{% macro accordion_item_close() %}
{% endmacro %}\n\n{% macro accordion_trigger(text, extra_class=\"\", attrs={}) -%}\n&_[data-slot=accordion-chevron]]:rotate-180 {{ extra_class }}\"\n {%- for k, v in attrs.items() %} {{ k|replace('_','-') }}=\"{{ v }}\"{% endfor %}>\n {{ text }}\n \n \n \n\n{%- endmacro %}\n\n{% macro accordion_content_open(extra_class=\"\", attrs={}) -%}\n
\n{%- endmacro %}\n\n{% macro accordion_content_close() %}
{% endmacro %}\n" }, { "path": "registry/go-templates/accordion.tmpl", "type": "registry:file", "target": "components/accordion.tmpl", "content": "{{/*\n Accordion templates — shadcn-htmx, htmx v4 + Tailwind v4.\n\n Three named templates compose:\n - \"accordion\" — wrapper open/close (call with Body)\n - \"accordion_item\" — single
with summary + content\n - \"accordion_trigger\" — just the (when composing manually)\n*/}}\n\n{{define \"accordion\"}}\n{{- $type := or .Type \"multiple\" -}}\n
\n {{.Body}}\n
\n{{end}}\n\n{{/* .Attrs (htmlSafe) forwards hx-* / global attributes onto the
\n so the native `toggle` event it fires can drive zero-JS lazy loading:\n hx-trigger=\"toggle once\" hx-get=... (toggle event: HTMLElement;\n hx-trigger accepts any DOM event). */}}\n{{define \"accordion_item\"}}\n
\n {{template \"accordion_trigger\" (dict \"Text\" .Title)}}\n
{{.Body}}
\n
\n{{end}}\n\n{{define \"accordion_trigger\"}}\n&_[data-slot=accordion-chevron]]:rotate-180\"{{with .Attrs}} {{.}}{{end}}>\n {{.Text}}\n \n \n \n\n{{end}}\n" }, { "path": "registry/phoenix/accordion.ex", "type": "registry:file", "target": "lib/my_app_web/components/accordion.ex", "content": "defmodule ShadcnHtmx.Components.Accordion do\n @moduledoc \"\"\"\n Accordion — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.\n\n Native `
` + ``. Single-expand mode (`type=\"single\"`)\n uses the new HTML `name` attribute which makes the group exclusive\n with zero JS. Multi-expand mode just omits the name.\n\n Keyboard nav (arrows, Home/End) lives in public/site.js.\n\n ## Examples\n\n <.accordion id=\"faq\" type=\"single\">\n <.accordion_item value=\"q1\" open>\n <.accordion_trigger>What's htmx?\n <.accordion_content>Hypermedia-driven HTML extensions.\n \n \n \"\"\"\n\n use Phoenix.Component\n\n attr :id, :string, required: true\n attr :type, :string, default: \"multiple\", values: ~w(single multiple)\n attr :class, :string, default: nil\n slot :inner_block, required: true\n\n def accordion(assigns) do\n ~H\"\"\"\n \n {render_slot(@inner_block)}\n \n \"\"\"\n end\n\n attr :value, :string, required: true\n attr :open, :boolean, default: false\n attr :disabled, :boolean, default: false\n attr :class, :string, default: nil\n # Forward hx-* / global attributes so the native `toggle` event
\n # fires can drive zero-JS lazy loading: hx-trigger=\"toggle once\" hx-get=...\n # (toggle event: HTMLElement; hx-trigger accepts any DOM event).\n attr :rest, :global\n slot :inner_block, required: true\n\n def accordion_item(assigns) do\n ~H\"\"\"\n \n {render_slot(@inner_block)}\n
\n \"\"\"\n end\n\n attr :class, :string, default: nil\n attr :rest, :global\n slot :inner_block, required: true\n\n def accordion_trigger(assigns) do\n ~H\"\"\"\n &_[data-slot=accordion-chevron]]:rotate-180\",\n @class\n ]}\n {@rest}\n >\n {render_slot(@inner_block)}\n \n \n \n \n \"\"\"\n end\n\n attr :class, :string, default: nil\n attr :rest, :global\n slot :inner_block, required: true\n\n def accordion_content(assigns) do\n ~H\"\"\"\n
\n {render_slot(@inner_block)}\n
\n \"\"\"\n end\nend\n" }, { "path": "registry/html/accordion.html", "type": "registry:file", "target": "snippets/accordion.html", "content": "\n\n\n
\n\n
\n &_[data-slot=accordion-chevron]]:rotate-180\">\n What's htmx?\n \n \n \n \n
\n Hypermedia-driven HTML extensions. AJAX, WebSockets, server-sent events with attributes.\n
\n
\n\n
\n &_[data-slot=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\n\n" } ] }