Collapsible

Layout

Collapsible content container.

Installation

npm install @radix-ui/react-collapsible

Import

import { PixelCollapsible, PixelCollapsibleTrigger, PixelCollapsibleContent } from "@/components/ui/pixel-collapsible"

Usage

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel-collapsible.tsx

"use client";

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";

const PixelCollapsible = CollapsiblePrimitive.Root;
const PixelCollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
const PixelCollapsibleContent = CollapsiblePrimitive.CollapsibleContent;

export { PixelCollapsible, PixelCollapsibleTrigger, PixelCollapsibleContent };

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.