arca-ui

Accordion

Expandable content sections with Paper Cut's 4-level elevation system.

Basic Usage

The default accordion uses default (Level 3) elevation with medium shadow and lift, suitable for general containers and panels.

The shadow simulates a warm hard light casting chromatic projections. Elements lift off the page on hover, with projections growing for depth.

Variants

Four elevation levels for different contexts. Choose based on the component's role in the interface hierarchy.

Elevated (Level 4)

Strong shadow with lift animation. For Landing Pages, Hero sections, and spotlight moments.

Full shadow with hover lift animation for maximum presence.

Default (Level 3)

Medium shadow with a moderate lift. The standard choice for general containers and panels.

Visible depth without being overwhelming.

Outlined (Level 2)

Border at rest, subtle lift on interaction. Lightweight and clean for dense layouts.

Clean borders without competing shadows.

Flat (Level 1)

No border, no shadow. For nesting inside Cards or other elevated containers.

Lift Control

Lift is enabled by default for elevated, default, and outlined. Disable it in dense layouts with lift={false}.

Lift On (Default)

Outlined stays border-only at rest, then lifts on hover/open/focus.

Lift Off

Use this when motion or layered depth would add visual noise.

Composition

Internal controls (Button, Badge) should use flat styling to respect the elevation budget.

$29/month

  • Unlimited projects
  • Priority support

Best Practices

Real-world scenarios demonstrating proper elevation budget allocation. The key principle: one region should have only one "hero" — the outer container owns the elevation while inner controls remain flat.

Landing Page FAQ

Use elevated for maximum visual impact on marketing pages.

Yes, built on Radix UI with proper ARIA, keyboard nav, and focus management.

Settings Panel

Use outlined for functional areas with minimal visual noise.

Display Name

Your public profile name

Nested in Card

Use flat when the container already owns elevation.

Help Center

Anti-patterns

Common mistakes to avoid when using accordions. The primary concern is elevation budget — stacking multiple elevated containers creates visual noise and breaks the Paper Cut hierarchy.

Bad: Double Shadow

Good: Card + Flat

API Reference

The Accordion component is built on top of Radix UI Accordion primitive with Paper Cut's 4-level elevation system.

Accordion

PropTypeDescription
type"single" | "multiple"Allow single or multiple items to be open
collapsiblebooleanAllow all items to be collapsed (single mode only)
variant"elevated" | "default" | "outlined" | "flat"Elevation level (Level 4, 3, 2, 1)
liftbooleanEnable/disable lift interaction (defaults to on except flat)

Elevation Levels

VariantLevelShadowUse Case
elevatedLevel 4Strong + liftLanding pages, hero sections
defaultLevel 3Medium + liftGeneral containers, panels
outlinedLevel 2Border + subtle liftSidebars, settings, dense layouts
flatLevel 1NoneNested inside elevated containers