Collapsible

A content area that can be dynamically expanded or collapsed, commonly used for accordions, FAQs, or hiding/showing detailed information sections.

Docs API Reference

@peduarte starred 3 repositories

@radix-ui/primitives

Component Installation Guide

npx shadcn@latest add collapsible

Implementing the Collapsible Component

  Collapsible, // The main container component that manages the collapsible state.
  CollapsibleContent, // Wraps the content that will be hidden or shown.
  CollapsibleTrigger, // The button or element that triggers the expand/collapse action.
} from "@/components/ui/collapsible"; // Adjust the import path based on your project structure.

// Basic structure: Wrap your trigger and content within the Collapsible component.
<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>

Checkbox Combobox