UIPackage
Menu

Framework

VueReact

Change language

Boilerplate repo

Collapsible

collapsibleui
Boilerplate repo

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://uipkge.dev/r/react/collapsible.json
Named registry:npx shadcn@latest add @uipkge-react/collapsibleInstalls to:components/ui/collapsible/

Examples

Loading interactive previews…

Used by

Files installed (2)

  • components/ui/collapsible/collapsible.tsx1.3 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.ts0.1 kB

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