grasscnGitHub

Collapsible

Button-triggered disclosure with measured Minecraft text.

Preview

Loading example...
To run this copied example, install these items using the linked CLI or manual instructions:

Usage

open/onOpenChange control this example. Without them the Base UI root owns disclosure state. CollapsibleTrigger is a native-skinned Button; CollapsibleContent defaults to align="left" and wrap=true. maxWidth is a logical text width, independent of the outer container width.

Composition

Scalar content uses the measured disclosure text path; rich children render separately. Compose links or fields inside Content as ordinary interactive children and let Trigger own disclosure. Open/closed whole-panel geometry is a web adaptation, while the Button constituent retains its declared evidence.

Installation

Loading registry address

Component source

This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.

Component implementationcomponents/ui/collapsible.tsx · tsx
"use client";

import { Collapsible as Primitive } from "@base-ui/react/collapsible";
import * as React from "react";

import { Button } from "./button";
import { MinecraftCollapsibleText } from "./minecraft-collapsible-text";
import {
  isMinecraftRefCallback,
  isMinecraftRefCleanup,
  isMinecraftTextContent,
  minecraftClasses as cn,

Interactive playground

Details closedWorld information

For the inherited interaction contract, see Base UI Collapsible. The restrictions above describe the installed Grasscn implementation.