Astryx Collapsible

Component

About

A primitive that makes any content collapsible: a trigger button toggles visibility of the content area, managing its own state or deferring to a parent CollapsibleGroup.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Collapsible to your project and fits it to your theme.

Code

How Astryx Collapsible is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import {Collapsible, CollapsibleGroup} from '@/components/ui/astryx-collapsible';
import {Section} from '@astryxdesign/core/Section';
import {Text} from '@astryxdesign/core/Text';
import {Stack} from '@astryxdesign/core/Stack';

/**
 * type="single": opening one section closes the others, so only one body of
 * content competes for attention at a time. Use `defaultValue` to pre-expand
 * whichever section a first-time reader needs.
 *
 * Each Collapsible owns a Section, so the trigger is that section's heading
 * and keeps its own `large` type.
 */
function CollapsibleSingleAccordion() {
  return (
    <CollapsibleGroup type="single" defaultValue="general">
      <Stack gap={2} maxWidth={440}>
        <Section>
          <Collapsible trigger="General" value="general">
            <Text type="body" color="secondary">
              Language, time zone, and date format. Time zone drives every
              timestamp in the product, including exports and scheduled reports.
            </Text>
          </Collapsible>
        </Section>

        <Section>
          <Collapsible trigger="Privacy" value="privacy">
            <Text type="body" color="secondary">
              Control who can see your profile and activity. Turning off
              discovery also removes you from @-mention autocomplete for people
              outside your workspace.
            </Text>
          </Collapsible>
        </Section>

        <Section>
          <Collapsible trigger="Notifications" value="notifications">
            <Text type="body" color="secondary">
              Choose what you are notified about and how it reaches you.
              Mentions always come through; everything else can be batched into
              a daily digest.
            </Text>
          </Collapsible>
        </Section>
      </Stack>
    </CollapsibleGroup>
  );
}

export default function CollapsibleSingleAccordionDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <CollapsibleSingleAccordion />
    </div>
  );
}