Things

The Collapsible component is an interactive element that allows users to expand or collapse a panel of content. It features bold borders and shadows that match the Things design system. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/collapsible.json

Usage

tsx

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

function MyComponent() {
  return (
    <Collapsible>
      <CollapsibleTrigger>@marvellousz starred 3 repositories</CollapsibleTrigger>
      <CollapsibleContent>
        <div className="space-y-2">
          <div className="p-2 border-2 border-foreground rounded neobrutalism-shadow-sm">@radix-ui/primitives</div>
          <div className="p-2 border-2 border-foreground rounded neobrutalism-shadow-sm">@radix-ui/colors</div>
          <div className="p-2 border-2 border-foreground rounded neobrutalism-shadow-sm">@stitches/react</div>
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Examples

@radix-ui/primitives

@radix-ui/colors

@stitches/react

This collapsible is open by default.