Collapsible

Shows and hides one region.

Inspect

Installation#

Terminal

npx shadcn@latest add @sphere-kit/collapsible

Usage#

collapsible.tsx

import {  Collapsible,  CollapsibleTrigger,  CollapsibleContent,} from "@/components/ui/collapsible"

Examples#

Do and don't#

One rule for using it well. Open one to see it drawn.

API reference#

Exports Collapsible CollapsibleTrigger CollapsibleContent. Every part takes its element's usual props and a className.

Collapsible

Shows and hides one region.

LayoutOpen in Figma

Inspect

3 links in the spring campaign

sphere.link/spring

Installation#

Terminal

npx shadcn@latest add @sphere-kit/collapsible

Usage#

collapsible.tsx

import {  Collapsible,  CollapsibleTrigger,  CollapsibleContent,} from "@/components/ui/collapsible"

Examples#

File Tree

Settings

Radius

Set the corner radius of the element.

Do and don't#

One rule for using it well. Open one to see it drawn.

API reference#

Exports Collapsible CollapsibleTrigger CollapsibleContent. Every part takes its element's usual props and a className.

3 links in the spring campaign

sphere.link/spring

File Tree

Settings

Radius

Set the corner radius of the element.

Installation#

Usage#

Examples#

Do and don't#

Fold away what most people skip, never what they came forFold away what most people skip, never what they came for

API reference#

3 links in the spring campaign

Installation#

Usage#

Examples#

File Tree

Settings

Do and don't#

Fold away what most people skip, never what they came forFold away what most people skip, never what they came for

API reference#

3 links in the spring campaign

File Tree

Settings