Shadow Panda
Shadow Panda
Component
Collapsible

Collapsible

An interactive component which expands/collapses a panel.

shadcn/uiRadix UIAPI Reference

@peduarte starred 3 repositories

@radix-ui/primitives

Installation

Install the following dependencies

npm i @radix-ui/react-collapsible

Copy and paste the following code into your project

components/ui/collapsible/index.tsx
'use client'
 
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
import { createStyleContext } from '@shadow-panda/style-context'
import { styled } from '@shadow-panda/styled-system/jsx'
import { collapsible } from '@shadow-panda/styled-system/recipes'
 
const { withProvider, withContext } = createStyleContext(collapsible)
 
export const Collapsible = withProvider(styled(CollapsiblePrimitive.Root), 'root')
export const CollapsibleTrigger = withContext(
  styled(CollapsiblePrimitive.CollapsibleTrigger),
  'trigger',
)
export const CollapsibleContent = withContext(
  styled(CollapsiblePrimitive.CollapsibleContent),
  'content',
)

Update the import paths to match your project setup

Usage

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible'
<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>
CheckboxCombobox