tsx
'use client';
​
import {useState} from 'react';
import {XDSCollapsible, XDSCollapsibleGroup} from '@xds/core/Collapsible';
import {XDSCard} from '@xds/core/Card';
import {XDSText} from '@xds/core/Text';
import {XDSVStack} from '@xds/core/Layout';
​
export default function CollapsibleControlledAccordion() {
  const [open, setOpen] = useState<string | string[]>('profile');
  return (
    <XDSCollapsibleGroup type="single" value={open} onChange={setOpen}>
      <XDSVStack gap={2}>
        <XDSCard>
          <XDSCollapsible trigger="Profile Information" value="profile">
            <XDSText type="body">
              Update your name, email, and profile photo. Changes are saved
              automatically.
            </XDSText>
          </XDSCollapsible>
        </XDSCard>
        <XDSCard>
          <XDSCollapsible trigger="Security" value="security">
            <XDSText type="body">
              Manage two-factor authentication, active sessions, and login
              history.
            </XDSText>
          </XDSCollapsible>
        </XDSCard>
        <XDSCard>
          <XDSCollapsible trigger="Billing" value="billing">
            <XDSText type="body">
              View invoices, update payment method, and manage your subscription
              plan.
            </XDSText>
          </XDSCollapsible>
        </XDSCard>
      </XDSVStack>
    </XDSCollapsibleGroup>
  );
}

tsx
'use client';
​
import {XDSCollapsible, XDSCollapsibleGroup} from '@xds/core/Collapsible';
import {XDSCard} from '@xds/core/Card';
import {XDSText} from '@xds/core/Text';
import {XDSVStack} from '@xds/core/Layout';
​
export default function CollapsibleMultipleAccordion() {
  return (
    <XDSCollapsibleGroup type="multiple" defaultValue={['features', 'pricing']}>
      <XDSVStack gap={2}>
        <XDSCard>
          <XDSCollapsible trigger="Features" value="features">
            <XDSText type="body">
              Includes real-time collaboration, version history, and granular
              permissions for teams of any size.
            </XDSText>
          </XDSCollapsible>
        </XDSCard>
        <XDSCard>
          <XDSCollapsible trigger="Pricing" value="pricing">
            <XDSText type="body">
              Free for up to 5 users. Pro plans start at $12/user/month with
              annual billing.
            </XDSText>
          </XDSCollapsible>
        </XDSCard>
        <XDSCard>
          <XDSCollapsible trigger="Integrations" value="integrations">
            <XDSText type="body">
              Connect with Slack, GitHub, Jira, and 40+ other tools through our
              REST API and pre-built connectors.
            </XDSText>
          </XDSCollapsible>
        </XDSCard>
      </XDSVStack>
    </XDSCollapsibleGroup>
  );
}

tsx
'use client';
​
import {XDSCollapsible, XDSCollapsibleGroup} from '@xds/core/Collapsible';
import {XDSSection} from '@xds/core/Section';
import {XDSText} from '@xds/core/Text';
import {XDSVStack} from '@xds/core/Layout';
​
export default function CollapsibleSingleAccordion() {
  return (
    <XDSCollapsibleGroup type="single" defaultValue="general">
      <XDSVStack gap={2}>
        <XDSSection>
          <XDSCollapsible trigger="General Settings" value="general">
            <XDSText type="body">
              Configure your general preferences including language, timezone,
              and display options.
            </XDSText>
          </XDSCollapsible>
        </XDSSection>
        <XDSSection>
          <XDSCollapsible trigger="Privacy Settings" value="privacy">
            <XDSText type="body">
              Manage who can see your profile, activity, and personal
              information.
            </XDSText>
          </XDSCollapsible>
        </XDSSection>
        <XDSSection>
          <XDSCollapsible trigger="Notification Settings" value="notifications">
            <XDSText type="body">
              Choose which notifications you receive and how they are delivered.
            </XDSText>
          </XDSCollapsible>
        </XDSSection>
      </XDSVStack>
    </XDSCollapsibleGroup>
  );
}

tsx
'use client';
​
import {XDSCollapsible} from '@xds/core/Collapsible';
import {XDSDivider} from '@xds/core/Divider';
import {XDSText} from '@xds/core/Text';
import {XDSVStack} from '@xds/core/Layout';
​
export default function CollapsibleWithoutCard() {
  return (
    <XDSVStack gap={3}>
      <XDSCollapsible trigger="Deployment Details">
        <XDSText type="body">
          Last deployed on April 18, 2026 at 3:42 PM by Sarah Chen. Build
          duration was 2m 14s with zero warnings.
        </XDSText>
      </XDSCollapsible>
      <XDSDivider />
      <XDSCollapsible trigger="Environment Variables" defaultIsOpen={false}>
        <XDSText type="body">
          12 variables configured. Last updated March 30, 2026. All secrets are
          encrypted at rest with AES-256.
        </XDSText>
      </XDSCollapsible>
      <XDSDivider />
      <XDSCollapsible trigger="Build Logs" defaultIsOpen={false}>
        <XDSText type="body">
          Build completed successfully. 847 modules compiled, 0 errors, 0
          warnings. Bundle size: 142 KB gzipped.
        </XDSText>
      </XDSCollapsible>
    </XDSVStack>
  );
}