radkradk

Collapsible

An interactive component which expands/collapses a panel.

@radk/ui starred repos

@radix-ui/primitives

Installation

npx radk add collapsible

Usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects.
  </CollapsibleContent>
</Collapsible>

Examples

Controlled

const [isOpen, setIsOpen] = React.useState(false)

<Collapsible open={isOpen} onOpenChange={setIsOpen}>
  <CollapsibleTrigger asChild>
    <Button variant="ghost">Toggle</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    Hidden content shown when open.
  </CollapsibleContent>
</Collapsible>

Checkbox

A control that allows the user to toggle between checked and not checked.

Dialog

A modal dialog that interrupts the user with important content.

On this page

InstallationUsageExamplesControlled