Collapsible

since 1.0

Collapsible is a container that can be expanded or collapsed to show or hide content.

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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Collapsible
CollapsibleTrigger
CollapsibleContent

Props

All components accept standard HTML attributes and React props.

Checkbox Combobox

On This Page

Example Install Components Props