Collapsible

One region that opens and closes on the disclosure spring.

Features

  • One region on the reflow spring.

Use it for

  • Optional details.

Installation

  1. Get runets.
    git clone https://github.com/ziyam-khan/runets
  2. Copy these files into your project, keeping their folders.
  3. Install what they use.
    pnpm add react @base-ui/react motion lucide-react
  4. Load the styles once. Bring your own base tokens, or use runets’ default theme.
    import 'runets/styles/theme.css'
    import 'runets/styles/kit.css'

Usage

import { Collapsible } from 'runets'

<Collapsible title="Show the details">…</Collapsible>

API

PropTypeWhat it does
titlestringTrigger text.

Accessibility

Source

The code is in src/kit/surfaces.tsx in runets, MIT licensed.