Accordion

A set of expand/collapse sections built on Disclosure, stacked into one divider-separated list.

Can I change plans mid-cycle?

Yes. The new price is prorated to the day, so an upgrade is billed for the rest of the period and a downgrade lands as credit on the next invoice.

What counts as a seat?

Anyone who signs in during the billing period. Invited members who never accept are free, and a member you remove stops counting the same day.

Do you offer refunds?

Within thirty days of the charge, for any reason, back to the original card.

Which payment methods work?

Every major card, plus SEPA direct debit in the EU. Annual plans over ten seats can pay by invoice with net-30 terms.

Legacy metered pricing

Closed to new accounts.

View code

<Accordion mix={[maxIs("34rem")]}>
	<Accordion.Item name="billing-faq" open>
		<Accordion.Trigger>
			Can I change plans mid-cycle?
			<ChevronDownIcon data-slot="icon" aria-hidden="true" />
		</Accordion.Trigger>
		<Accordion.Content>
			<p>
				Yes. The new price is prorated to the day, so an upgrade is billed for the rest of
				the period and a downgrade lands as credit on the next invoice.
			</p>
		</Accordion.Content>
	</Accordion.Item>
	<Accordion.Item name="billing-faq">
		<Accordion.Trigger>
			What counts as a seat?
			<ChevronDownIcon data-slot="icon" aria-hidden="true" />
		</Accordion.Trigger>
		<Accordion.Content>
			<p>
				Anyone who signs in during the billing period. Invited members who never accept are
				free, and a member you remove stops counting the same day.
			</p>
		</Accordion.Content>
	</Accordion.Item>
	<Accordion.Item name="billing-faq">
		<Accordion.Trigger>
			Do you offer refunds?
			<ChevronDownIcon data-slot="icon" aria-hidden="true" />
		</Accordion.Trigger>
		<Accordion.Content>
			<p>Within thirty days of the charge, for any reason, back to the original card.</p>
		</Accordion.Content>
	</Accordion.Item>
	<Accordion.Item name="billing-faq">
		<Accordion.Trigger>
			Which payment methods work?
			<ChevronDownIcon data-slot="icon" aria-hidden="true" />
		</Accordion.Trigger>
		<Accordion.Content>
			<p>
				Every major card, plus SEPA direct debit in the EU. Annual plans over ten seats can
				pay by invoice with net-30 terms.
			</p>
		</Accordion.Content>
	</Accordion.Item>
	<Accordion.Item name="billing-faq">
		<Accordion.Trigger aria-disabled="true">
			Legacy metered pricing
			<ChevronDownIcon data-slot="icon" aria-hidden="true" />
		</Accordion.Trigger>
		<Accordion.Content>
			<p>Closed to new accounts.</p>
		</Accordion.Content>
	</Accordion.Item>
</Accordion>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Accordion } from "@sdxc/ui";

Renders the list's root host: a plain <div> that stacks Accordion.Item sections in normal block flow, each drawing its own divider so the whole list reads as one continuous group.

Composition

The parts the component publishes, each a static property of the host.

Accordion
Accordion.ItemRenders one section as Disclosure restyled into a flush list row: only a shared block-end divider survives, restored block-start on the first section.
Accordion.TriggerRenders Accordion.TriggerProps.children as the section's label row, spread to opposite ends and underlined on hover.
Accordion.ContentRenders Accordion.ContentProps.children as the section's revealed body: Disclosure.Panel restyled with block-end padding and small, muted text sized for supporting copy.

Examples

<Accordion>
	<Accordion.Item name="faq" open>
		<Accordion.Trigger>
			{t("faq.refunds.question")}
			<ChevronDownIcon data-slot="icon" aria-hidden />
		</Accordion.Trigger>
		<Accordion.Content>
			<p>{t("faq.refunds.answer")}</p>
		</Accordion.Content>
	</Accordion.Item>
	<Accordion.Item name="faq">
		<Accordion.Trigger>
			{t("faq.shipping.question")}
			<ChevronDownIcon data-slot="icon" aria-hidden />
		</Accordion.Trigger>
		<Accordion.Content>
			<p>{t("faq.shipping.answer")}</p>
		</Accordion.Content>
	</Accordion.Item>
</Accordion>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`children`	`RemixNode`	One or more Accordion.Item sections to stack into a list.

Also accepts everything in TagProps<"div">.

Accordion.Item

Also accepts everything in Disclosure.Props.

Accordion.Trigger

Also accepts everything in Disclosure.TriggerProps.

Accordion.Content

Also accepts everything in Disclosure.PanelProps.