Accordion
The Accordion component groups related content into expandable sections.
Source
LLM docs
Package
Examples
5
Properties
49
Playground
Basics
Allow only one item to open at a time by setting
type="single" and passing an items array.Loading demo…
import { Accordion } from '@plocks/ui';
import { faqItems } from '../data';
export function Demo() {
return <Accordion type="single" items={faqItems} />;
}Multiple Expansion
Control the
expanded keys to keep several accordion items open at the same time.Loading demo…
import { useState } from 'react';
import { Accordion } from '@plocks/ui';
import { knowledgeBase } from '../data';
export function Demo() {
const [expandedKeys, setExpandedKeys] = useState<string[]>(['collaboration']);
return (
<Accordion
type="multiple"
expanded={expandedKeys}
onExpandedChange={setExpandedKeys}
items={knowledgeBase}
/>
);
}Visual Variants
Switch between
default, separated, and bordered variants to adjust emphasis.Loading demo…
import { Accordion, Block, Text } from '@plocks/ui';
import { onboardingSteps } from '../data';
const variants = ['default', 'separated', 'bordered'] as const;
export function Demo() {
return (
<Block>
{variants.map((variant) => (
<Block key={variant}>
<Text size="xs" fw="600" c="muted" tt="uppercase" lts={1}>
{variant}
</Text>
<Accordion type="single" variant={variant} items={onboardingSteps} />
</Block>
))}
</Block>
);
}Accent Colors
Accent each expanded panel with a theme palette —
primary, secondary, tertiary, success, warning, error, or gray. Set color on the accordion for a uniform accent, or per item to mix accents in a single accordion. Collapsed items stay neutral so only the open panel is highlighted.Loading demo…
import { Accordion } from '@plocks/ui';
import { statusItems } from '../data';
export function Demo() {
return (
<Accordion
type="multiple"
variant="separated"
defaultExpanded={['healthy']}
items={statusItems}
/>
);
}Title customization
titleProps accepts any <Text> props (ff, fw, lts, tt, size, c, style) and applies them to every item header in the accordion. The existing headerTextStyle escape hatch still works and can be combined.Loading demo…
import { Accordion } from '@plocks/ui';
import { setupSteps } from '../data';
export function Demo() {
return (
<Accordion
items={setupSteps}
titleProps={{ tt: 'uppercase', lts: 1, fw: '700', size: 'sm' }}
/>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources