Strongtie Design System
Getting StartedComponents

Command Palette

Search for a command to run...

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Code Quality Setup
  • Migration Guide
  • Resources
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tree
Guides
  • Framework Recommendations
Foundations
  • States
  • Variables
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Command
  • Combobox
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  3. Components
  5. Collapsible

Collapsible

PreviousNext

Collapsible component for the Simpson Strong-Tie design system.

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 accept standard HTML attributes and React 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.

Classes

CSS classes used by this component:

  • collapsible-content

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

CheckboxCombobox

On This Page

ExampleInstallationComponentsPropsExampleStylingClassesAccessibility

Contribute

  • Report an issue
  • Request a feature
  • Edit this page