🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Collapsible

A container component that can be expanded or collapsed to show or hide content.

Collapsible components allow users to toggle the visibility of content sections, helping conserve screen space and reduce cognitive load by hiding secondary information until needed. They're commonly used in sidebars, FAQ sections, settings panels, or anywhere progressive disclosure is beneficial. Unlike accordions where only one section can be open at a time, collapsibles operate independently.

Built on top of Radix UI's Collapsible primitive with smooth animations, accessibility support including proper ARIA attributes, and keyboard navigation.

Example

Fruits List

apples

oranges

kiwi

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@strongtie/design-system/collapsible"
import { MdExpandMore } from "react-icons/md"

export function CollapsibleDefault() {
  return (
    <Collapsible>
      <div className="flex items-center justify-between space-x-4">
        <h4 className="text-sm font-semibold">Fruits List</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm">
            <MdExpandMore className="h-4 w-4" />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="my-1">apples</div>
      <div className="my-1">oranges</div>
      <div className="my-1">kiwi</div>
      <CollapsibleContent className="space-y-2">
        <div className="my-1">tomatoes</div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Installation


npm install @strongtie/design-system

import { Collapsible } from "@strongtie/design-system/collapsible"

Components

This module exports the following components:

Collapsible
CollapsibleTrigger
CollapsibleContent

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Example

Fruits List

apples

oranges

kiwi

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@strongtie/design-system/collapsible"
import { MdExpandMore } from "react-icons/md"

export function CollapsibleDefault() {
  return (
    <Collapsible>
      <div className="flex items-center justify-between space-x-4">
        <h4 className="text-sm font-semibold">Fruits List</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm">
            <MdExpandMore className="h-4 w-4" />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="my-1">apples</div>
      <div className="my-1">oranges</div>
      <div className="my-1">kiwi</div>
      <CollapsibleContent className="space-y-2">
        <div className="my-1">tomatoes</div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Component Slots

The following data attributes are used to identify component parts:

collapsible
collapsible-content
collapsible-trigger

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI collapsible Documentation

Checkbox Combobox

On This Page

Example Installation Components Props Example Styling Component Slots Accessibility Resources

Contribute

Collapsible

A container component that can be expanded or collapsed to show or hide content.

Built on top of Radix UI's Collapsible primitive with smooth animations, accessibility support including proper ARIA attributes, and keyboard navigation.

Example

Fruits List

apples

oranges

kiwi

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@strongtie/design-system/collapsible"
import { MdExpandMore } from "react-icons/md"

export function CollapsibleDefault() {
  return (
    <Collapsible>
      <div className="flex items-center justify-between space-x-4">
        <h4 className="text-sm font-semibold">Fruits List</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm">
            <MdExpandMore className="h-4 w-4" />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="my-1">apples</div>
      <div className="my-1">oranges</div>
      <div className="my-1">kiwi</div>
      <CollapsibleContent className="space-y-2">
        <div className="my-1">tomatoes</div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Installation


npm install @strongtie/design-system

import { Collapsible } from "@strongtie/design-system/collapsible"

Components

This module exports the following components:

Collapsible
CollapsibleTrigger
CollapsibleContent

Props

All components extend Radix UI primitives. See the Radix UI documentation for all available props.

Example

Fruits List

apples

oranges

kiwi

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@strongtie/design-system/collapsible"
import { MdExpandMore } from "react-icons/md"

export function CollapsibleDefault() {
  return (
    <Collapsible>
      <div className="flex items-center justify-between space-x-4">
        <h4 className="text-sm font-semibold">Fruits List</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm">
            <MdExpandMore className="h-4 w-4" />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="my-1">apples</div>
      <div className="my-1">oranges</div>
      <div className="my-1">kiwi</div>
      <CollapsibleContent className="space-y-2">
        <div className="my-1">tomatoes</div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Component Slots

The following data attributes are used to identify component parts:

collapsible
collapsible-content
collapsible-trigger

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI collapsible Documentation

Checkbox Combobox

On This Page

Example Installation Components Props Example Styling Component Slots Accessibility Resources

Contribute