Components
Loading preview...
here is collapsible demo by indev ui
npx shadcn@latest add https://21st.dev/r/ln-dev7/indevui-collapsibleimport * 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 };