Panel & layout components — Card, Tabs, Accordion, Splitter, Toolbar

Card Link to Card

A surface with optional title and footer for grouping related content.

Live demo

Revenue grew 24% with the new onboarding flow.

$29 / month

Props

Prop	Type	Description
`title`	`ReactNode`	Heading area.
`footer`	`ReactNode`	Actions area.
`children`	`ReactNode`	Body.

Accessibility

Card · React

<Card title="Quarterly report" footer={<Button size="sm">Open</Button>}>
  Revenue grew 24% with the new onboarding flow.
</Card>

Card · Vue

<Card title="Quarterly report">
  Revenue grew 24%.
  <template #footer><Button size="sm">Open</Button></template>
</Card>

Card · Svelte

<Card title="Quarterly report">
  Revenue grew 24%.
  {#snippet footer()}<Button size="sm">Open</Button>{/snippet}
</Card>

Card · Astro

<Card title="Quarterly report">
  Revenue grew 24%.
  <Button slot="footer" size="sm">Open</Button>
</Card>

Card · React Native

<Card title="Quarterly report" footer={<Button title="Open" size="sm" />}>
  <Text>Revenue grew 24%.</Text>
</Card>

Accordion Link to Accordion

Stacked disclosure sections; one or several can be open.

Live demo

Yes. It is MIT licensed for personal and commercial use.

Props

Prop	Type	Description
`items`	`{ key, title, content }[]`	Sections.
`multiple`	`boolean`	Allow several open at once.
`defaultOpen`	`string[]`	Keys open initially.

Accessibility

Accordion keyboard support
Key	Action
`Enter` / `Space`	Expand or collapse the focused section
`Tab`	Move to the next header or into an open panel

Accordion · React

<Accordion defaultOpen={['free']} items={[
  { key: 'free', title: 'Is Pelagic UI free?', content: 'Yes, MIT licensed.' },
  { key: 'rtl', title: 'Does it support RTL?', content: 'Yes, it mirrors automatically.' },
]} />

Accordion · Vue

<Accordion :items="faq" :default-open="['free']" />

Accordion · Svelte

<Accordion items={faq} defaultOpen={['free']} />

Accordion · Astro

<Accordion exclusive items={[{ title: 'Is Pelagic UI free?', content: 'Yes.', open: true }]} />

Accordion · React Native

<Accordion items={faq} defaultOpen={['free']} />

Tabs Link to Tabs

Switch between panels of related content in the same place.

Live demo

12 tasks, 3 in review.

Active tab: overview

Props

Prop	Type	Description
`tabs`	`{ key, label, content?, disabled? }[]`	Tabs and their panels.
`value / defaultValue`	`string`	Selected tab key.
`onChange`	`(key) => void`	Called when the tab changes.

Accessibility

Tabs keyboard support
Key	Action
`Arrow Left` / `Arrow Right`	Previous / next tab (mirrored in RTL)
`Home` / `End`	First / last tab
`Tab`	Move into the active panel

Tabs · React

<Tabs tabs={[
  { key: 'overview', label: 'Overview', content: <p>…</p> },
  { key: 'activity', label: 'Activity', content: <p>…</p> },
]} />

Tabs · Vue

<Tabs v-model="tab" :tabs="[{ key: 'overview', label: 'Overview' }, { key: 'activity', label: 'Activity' }]">
  <template #panel-overview>…</template>
  <template #panel-activity>…</template>
</Tabs>

Tabs · Svelte

<Tabs bind:value={tab} tabs={[{ key: 'overview', label: 'Overview' }, { key: 'activity', label: 'Activity' }]}>
  {#snippet panel(key)}{key === 'overview' ? 'Overview…' : 'Activity…'}{/snippet}
</Tabs>

Tabs · Astro

<Tabs tabs={[{ key: 'overview', label: 'Overview' }, { key: 'activity', label: 'Activity' }]}>
  <p slot="panel-overview">…</p>
  <p slot="panel-activity">…</p>
</Tabs>

Tabs · React Native

<Tabs tabs={[
  { key: 'overview', label: 'Overview', content: <Text>…</Text> },
  { key: 'activity', label: 'Activity', content: <Text>…</Text> },
]} />

Panel Link to Panel

A titled container that can collapse, with header actions and a footer.

Live demo

12 new events today. Collapse me with the toggle button.

Props

Prop	Type	Description
`header`	`ReactNode`	Title.
`toggleable`	`boolean`	Adds a collapse button.
`collapsed / defaultCollapsed / onToggle`	`boolean`	Collapse state.
`actions / footer`	`ReactNode`	Header actions and footer.
`headingLevel`	`2 – 6`	Heading level for the header.

Accessibility

Panel keyboard support
Key	Action
`Enter` / `Space`	Toggle the panel (on the collapse button)

ReactComing to Vue, Svelte and Angular.

Panel · React

<Panel header="Activity" toggleable actions={<Button size="sm" variant="ghost">Refresh</Button>}>
  12 new events today.
</Panel>

Fieldset Link to Fieldset

A native fieldset with legend that can optionally collapse.

Live demo

Street

City

Props

Prop	Type	Description
`legend`	`ReactNode`	Group title.
`toggleable`	`boolean`	Legend becomes a toggle button.
`collapsed / defaultCollapsed / onToggle`	`boolean`	Collapse state.

Accessibility

Fieldset keyboard support
Key	Action
`Enter` / `Space`	Toggle (when toggleable)

ReactComing to Vue, Svelte and Angular.

Fieldset · React

<Fieldset legend="Shipping address" toggleable>
  <Input label="Street" />
</Fieldset>

ScrollPanel Link to ScrollPanel

A scrollable region with themed scrollbars that keyboard users can reach.

Live demo

1. Section 1. You may use Pelagic UI in personal and commercial projects. Attribution is appreciated but not required. The software is provided “as is”, without warranty of any kind.

2. Section 2. You may use Pelagic UI in personal and commercial projects. Attribution is appreciated but not required. The software is provided “as is”, without warranty of any kind.

3. Section 3. You may use Pelagic UI in personal and commercial projects. Attribution is appreciated but not required. The software is provided “as is”, without warranty of any kind.

4. Section 4. You may use Pelagic UI in personal and commercial projects. Attribution is appreciated but not required. The software is provided “as is”, without warranty of any kind.

5. Section 5. You may use Pelagic UI in personal and commercial projects. Attribution is appreciated but not required. The software is provided “as is”, without warranty of any kind.

6. Section 6. You may use Pelagic UI in personal and commercial projects. Attribution is appreciated but not required. The software is provided “as is”, without warranty of any kind.

7. Section 7. You may use Pelagic UI in personal and commercial projects. Attribution is appreciated but not required. The software is provided “as is”, without warranty of any kind.

8. Section 8. You may use Pelagic UI in personal and commercial projects. Attribution is appreciated but not required. The software is provided “as is”, without warranty of any kind.

Props

Prop	Type	Description
`label`	`string`	Accessible name of the region (required).
`height`	`number \| string`	Viewport height.

Accessibility

ScrollPanel keyboard support
Key	Action
`Tab`	Focus the region
`Arrow keys` / `Page Up` / `Page Down`	Scroll the focused region

ReactComing to Vue, Svelte and Angular.

ScrollPanel · React

<ScrollPanel label="Terms of service" height={200}>
  <p>…long content…</p>
</ScrollPanel>

Splitter Link to Splitter

Resizable panes separated by draggable, keyboard-operable gutters.

Live demo

Files

Drag the gutter or focus it and use the arrow keys.

Editor

Terminal

Sizes: 30% / 70%

Props

Prop	Type	Description
`layout`	`'horizontal' \| 'vertical'`	Direction.
`SplitterPanel size / minSize`	`number (%)`	Initial and minimum sizes.
`stateKey`	`string`	Persist sizes in localStorage.
`step`	`number`	Keyboard step in %.
`onResize / onResizeEnd`	`(sizes) => void`	Size callbacks.

Accessibility

Splitter keyboard support
Key	Action
`Arrow keys`	Move the focused gutter (mirrored in RTL)
`Home` / `End`	Collapse to the minimum / maximum

ReactComing to Vue, Svelte and Angular.

Splitter · React

<Splitter stateKey="editor-split" className="editor-split">
  <SplitterPanel size={30} minSize={15}>Files</SplitterPanel>
  <SplitterPanel size={70}>Editor</SplitterPanel>
</Splitter>

Groups controls into start, center and end areas with a single tab stop.

Live demo

Last action: none

Props

Prop	Type	Description
`label`	`string`	Accessible name (required).
`start / center / end`	`ReactNode`	Areas.
`orientation`	`'horizontal' \| 'vertical'`	Arrow-key direction.

Accessibility

Toolbar keyboard support
Key	Action
`Arrow Left` / `Arrow Right`	Move between controls
`Home` / `End`	First / last control
`Tab`	Leave the toolbar

ReactComing to Vue, Svelte and Angular.

Toolbar · React

<Toolbar label="Formatting"
  start={<><Button size="sm">Bold</Button><Button size="sm">Italic</Button></>}
  end={<Button size="sm" variant="secondary">Share</Button>} />

Divider Link to Divider

A thin separator between sections.

Live demo

Account settings

Danger zone

Props

Prop	Type	Description
`className`	`string`	Extra classes.

Accessibility

Divider · React

<Divider />

Divider · Vue

<Divider />

Divider · Svelte

<Divider />

Divider · Astro

<Divider />

Divider · React Native

<Divider />

Stepper Link to Stepper

Shows progress through a multi-step flow.

Live demo

AccountYour details
WorkspaceName it
Invite team
Launch

Props

Prop	Type	Description
`steps`	`{ label, description? }[]`	Steps.
`current`	`number`	Zero-based index of the active step.

Accessibility

Stepper · React

<Stepper current={1} steps={[{ label: 'Account' }, { label: 'Workspace' }, { label: 'Invite' }]} />

Stepper · Vue

<Stepper :current="1" :steps="steps" />

Stepper · Svelte

<Stepper current={1} {steps} />

Stepper · Astro

<Stepper current={1} steps={steps} />

Stepper · React Native

<Stepper current={1} steps={steps} />

Accessibility

Theme

Contrast & color

Text

Reading aids

Motion & media

Interaction

Sound

Panels & layout

Card #Link to Card

Props

Accessibility

Code

Accordion #Link to Accordion

Is Pelagic UI free?▾

Which frameworks are supported?▾

Does it support Arabic and RTL?▾

Props

Accessibility

Code

Tabs #Link to Tabs

Props

Accessibility

Code

Panel #Link to Panel

Activity

Props

Accessibility

Code

Fieldset #Link to Fieldset

Props

Accessibility

Code

ScrollPanel #Link to ScrollPanel

Props

Accessibility

Code

Splitter #Link to Splitter

Props

Accessibility

Code

Toolbar #Link to Toolbar

Props

Accessibility

Code

Divider #Link to Divider

Props

Accessibility

Code

Stepper #Link to Stepper

Props

Accessibility

Code

Card Link to Card

Accordion Link to Accordion

Tabs Link to Tabs

Panel Link to Panel

Fieldset Link to Fieldset

ScrollPanel Link to ScrollPanel

Splitter Link to Splitter

Toolbar Link to Toolbar

Divider Link to Divider

Stepper Link to Stepper