On this page

Collapsible

@starwind-ui starred 3 repositories

astro

---
import { Button } from "@/components/starwind/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/starwind/collapsible";
import IconSelector from "@tabler/icons/outline/selector.svg";
---

<Collapsible class="w-[350px] space-y-2">
  <div class="flex items-center justify-between space-x-4 px-4">
    <h4 class="text-sm font-semibold">@starwind-ui starred 3 repositories</h4>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="icon-sm">
        <IconSelector class="size-4" />
        <span class="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <div class="rounded-md border px-4 py-2 font-mono text-sm">astro</div>
  <CollapsibleContent class="space-y-2">
    <div class="rounded-md border px-4 py-2 font-mono text-sm">tailwindcss</div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">starwind-ui</div>
  </CollapsibleContent>
</Collapsible>

import { Button } from "@/components/starwind/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/starwind/collapsible";
import { IconSelector } from "@tabler/icons-react";

export function Example() {
  return (
    <Collapsible className="w-[350px] space-y-2">
      <div className="flex items-center justify-between space-x-4 px-4">
        <h4 className="text-sm font-semibold">@starwind-ui starred 3 repositories</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon-sm">
            <IconSelector className="size-4" />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-2 font-mono text-sm">astro</div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-2 font-mono text-sm">tailwindcss</div>
        <div className="rounded-md border px-4 py-2 font-mono text-sm">starwind-ui</div>
      </CollapsibleContent>
    </Collapsible>
  );
}

Installation

pnpx starwind@latest add collapsible

npx starwind@latest add collapsible

yarn dlx starwind@latest add collapsible

Usage

---
import { Button } from "@/components/starwind/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/starwind/collapsible";
import IconSelector from "@tabler/icons/outline/selector.svg";
---

<Collapsible class="w-[350px] space-y-2">
  <div class="flex items-center justify-between space-x-4 px-4">
    <h4 class="text-sm font-semibold">@starwind-ui starred 3 repositories</h4>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="icon-sm">
        <IconSelector class="size-4" />
        <span class="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <div class="rounded-md border px-4 py-2 font-mono text-sm">astro</div>
  <CollapsibleContent class="space-y-2">
    <div class="rounded-md border px-4 py-2 font-mono text-sm">tailwindcss</div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">starwind-ui</div>
  </CollapsibleContent>
</Collapsible>

import { Button } from "@/components/starwind/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/starwind/collapsible";
import { IconSelector } from "@tabler/icons-react";

export function Example() {
  return (
    <Collapsible className="w-[350px] space-y-2">
      <div className="flex items-center justify-between space-x-4 px-4">
        <h4 className="text-sm font-semibold">@starwind-ui starred 3 repositories</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon-sm">
            <IconSelector className="size-4" />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-2 font-mono text-sm">astro</div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-2 font-mono text-sm">tailwindcss</div>
        <div className="rounded-md border px-4 py-2 font-mono text-sm">starwind-ui</div>
      </CollapsibleContent>
    </Collapsible>
  );
}

Composition

Use a trigger and a content region inside the root:

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

When to Use

Use Collapsible for content that a user can reveal in place, such as an expandable settings section or supplemental details.

API Reference

Styled Component API

These props are added or materially changed by the installed styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Expand a prop to see named type definitions and framework-specific imports. Follow the Primitive and Runtime links for lower-level behavior props.

Collapsible Trigger

Inherits button attributes.

Contains the following additional props:

Prop Type Default

asChild boolean false

Description: Merges the component behavior and props into its child element.
Classification: Primitive override
Primitive prop: collapsible.Trigger.asChild

Primitive And Runtime API

Use these references when you need the lower-level behavior APIs behind Collapsible.

Primitive API

Collapsible Primitive

Runtime API

Collapsible primitive: createCollapsible from @starwind-ui/runtime/collapsible

Changelog

View version history v2.0.1 2 releases

v2.0.1

Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

v2.0.0

Rebuilt Collapsible on Starwind Runtime for open state and panel lifecycle.
See the Collapsible Primitive for the underlying unstyled anatomy and behavior API.