Collapsible

An interactive component which expands/collapses a panel.

Preview

@peduarte starred 3 repositories

Toggle

@radix-ui/primitives

Code

'use client'

import Button from '@dinui/react/button'
import Collapsible from '@dinui/react/collapsible'
import { IconSelector } from '@tabler/icons-react'
import * as React from 'react'

export default function CollapsibleDemo() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-96 space-y-2">
      <div className="flex items-center justify-between space-x-4 px-4">
        <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
        <Collapsible.Trigger asChild>
          <Button variant="ghost" size="sm" icon>
            <Button.Icon>
              <IconSelector />
            </Button.Icon>
            <span className="sr-only">Toggle</span>
          </Button>
        </Collapsible.Trigger>
      </div>
      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
        @radix-ui/primitives
      </div>

      <Collapsible.Content className="space-y-2">
        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
          @radix-ui/colors
        </div>
        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
          @stitches/react
        </div>
      </Collapsible.Content>
    </Collapsible>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add collapsible

   yarn

   yarn dlx @dinui/cli@latest add collapsible

   pnpm

   pnpm dlx @dinui/cli@latest add collapsible

   bun

   bunx @dinui/cli@latest add collapsible

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-collapsible

   yarn

   yarn add @radix-ui/react-collapsible

   pnpm

   pnpm add @radix-ui/react-collapsible

   bun

   bun add @radix-ui/react-collapsible

3. Copy and paste the following code into your project

   'use client'
   
   import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
   
   const Collapsible = Object.assign(CollapsiblePrimitive.Root, {
     Trigger: CollapsiblePrimitive.CollapsibleTrigger,
     Content: CollapsiblePrimitive.CollapsibleContent,
   })
   
   export default Collapsible
   export { CollapsiblePrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.