UIPackage
Vue React

Collapsible

React disclosure
Edit on GitHub

Headless single-region show/hide primitive. Use it when Accordion is overkill — a single toggle reveals one panel of content. Smooth height animation built in.

Also available for Vue ->

Installation

$ npx shadcn@latest add https://react.uipkge.dev/r/react/collapsible.json

Or with the named registry: npx shadcn@latest add @uipkge-react/collapsible

Examples

Dependencies

@radix-ui/react-collapsible

Used by

sidebar-02sidebar-03

Files (2)

  • components/ui/collapsible/collapsible.tsx 1.4 kB 
    'use client'

import * as React from 'react'
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'

const Collapsible = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>
>(({ ...props }, ref) => (
  <CollapsiblePrimitive.Root ref={ref} data-uipkge="" data-slot="collapsible" {...props} />
))
Collapsible.displayName = CollapsiblePrimitive.Root.displayName

const CollapsibleTrigger = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleTrigger>,
  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger>
>(({ ...props }, ref) => (
  <CollapsiblePrimitive.CollapsibleTrigger
    ref={ref}
    data-uipkge=""
    data-slot="collapsible-trigger"
    {...props}
  />
))
CollapsibleTrigger.displayName = CollapsiblePrimitive.CollapsibleTrigger.displayName

const CollapsibleContent = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
>(({ ...props }, ref) => (
  <CollapsiblePrimitive.CollapsibleContent
    ref={ref}
    data-uipkge=""
    data-slot="collapsible-content"
    {...props}
  />
))
CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
  • components/ui/collapsible/index.ts 0.1 kB 
    export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible'

Raw manifest: https://react.uipkge.dev/r/react/collapsible.json