Collapsible

An interactive component which expands and collapses a panel. Built on Base UI's collapsible primitive.

Last updated August 7, 2026

CreditsUnchangedPublished

Overview

@persianlabsui starred 3 repositories

@base_ui/react

"use client"
 
import { ChevronsUpDownIcon } from "lucide-react"
import * as React from "react"
 
import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
 
export function CollapsibleDemoExample() {
  const [open, setOpen] = React.useState(false)
 
  return (
    <Collapsible open={open} onOpenChange={setOpen} className="w-full max-w-xs">
      <div className="flex items-center justify-between gap-4">
        <p className="text-sm font-medium">
          @persianlabsui starred 3 repositories
        </p>
        <CollapsibleTrigger
          render={
            <Button variant="ghost" size="icon-sm">
              <ChevronsUpDownIcon />
              <span className="sr-only">Toggle</span>
            </Button>
          }
        />
      </div>
      <div className="rounded-lg border border-border px-3 py-2 font-mono text-sm">
        @base_ui/react
      </div>
      <CollapsibleContent className="flex flex-col gap-2 pt-2">
        <div className="rounded-lg border border-border px-3 py-2 font-mono text-sm">
          @shadcn/ui
        </div>
        <div className="rounded-lg border border-border px-3 py-2 font-mono text-sm">
          @tailwindlabs/tailwindcss
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/collapsible.json

Usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
 
export function Example() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
      <CollapsibleContent>
        Yes. Free to use for personal and commercial projects.
      </CollapsibleContent>
    </Collapsible>
  )
}

RTL

۳ مخزن ستاره‌دار شده

@base_ui/react

"use client"
 
import { ChevronsUpDownIcon } from "lucide-react"
import * as React from "react"
 
import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
 
export function CollapsibleRtlExample() {
  const [open, setOpen] = React.useState(false)
 
  return (
    <Collapsible open={open} onOpenChange={setOpen} className="w-full max-w-xs">
      <div className="flex items-center justify-between gap-4">
        <p className="text-sm font-medium">۳ مخزن ستاره‌دار شده</p>
        <CollapsibleTrigger
          render={
            <Button variant="ghost" size="icon-sm">
              <ChevronsUpDownIcon />
              <span className="sr-only">باز و بسته کردن</span>
            </Button>
          }
        />
      </div>
      <div className="rounded-lg border border-border px-3 py-2 font-mono text-sm">
        @base_ui/react
      </div>
      <CollapsibleContent className="flex flex-col gap-2 pt-2">
        <div className="rounded-lg border border-border px-3 py-2 font-mono text-sm">
          @shadcn/ui
        </div>
        <div className="rounded-lg border border-border px-3 py-2 font-mono text-sm">
          @tailwindlabs/tailwindcss
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}

API Reference

Collapsible

Prop	Type	Default	Description
open	boolean	undefined	Whether the panel is open. Use when controlled.
defaultOpen	boolean	false	Whether the panel is initially open when uncontrolled.
onOpenChange	(open, details) => void	—	Called when the open state changes.
disabled	boolean	false	Prevents the panel from being toggled.

Edit this page on GitHub

PreviousCity Selector NextCombobox