Collapsible

Buttons 2

About

here is collapsible demo by indev ui

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Collapsible to your project and fits it to your theme.

Code

How Collapsible is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from 'react';
import { ChevronsUpDown } from 'lucide-react';

import Button from '@/components/ui/button';
import {
   Collapsible,
   CollapsibleTrigger,
   CollapsibleContent,
} from '@/components/ui/indevui-collapsible';

const CollapsibleDemo = () => {
   const [isOpen, setIsOpen] = React.useState(false);

   return (
      <div className="flex w-full items-center justify-center p-4">
         <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] 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>
               <CollapsibleTrigger asChild>
                  <Button variant="ghost" size="sm" className="w-9 p-0">
                     <ChevronsUpDown className="h-4 w-4" />
                     <span className="sr-only">Toggle</span>
                  </Button>
               </CollapsibleTrigger>
            </div>
            <div className="rounded-md border px-4 py-3 font-mono text-sm">
               @radix-ui/primitives
            </div>
            <CollapsibleContent className="space-y-2">
               <div className="rounded-md border px-4 py-3 font-mono text-sm">
                  @radix-ui/colors
               </div>
               <div className="rounded-md border px-4 py-3 font-mono text-sm">
                  @stitches/react
               </div>
            </CollapsibleContent>
         </Collapsible>
      </div>
   );
};

export { CollapsibleDemo as DemoOne };