Collapsible Component

The Collapsible component in sidcn provides an easy way to create collapsible sections, allowing you to organize and present information with flexibility. With components like CollapsibleTrigger and CollapsibleContent, you can build interactive and space-efficient layouts for your React Native and Expo applications.

Add Collapsible

npx sidcn add collapsible

Reset Cache

yarn start --clear // yarn
 
npm start -- --reset-cache // npm

Import Collapsible

Begin using the Collapsible component by importing it from sidcn.

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '/components/sidcn/ui/collapsible';

How to use

Create a collapsible section with a trigger and content.

<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>

Use with className

Apply custom styling to the Collapsible component using Tailwind CSS classes or custom styles.

<Collapsible
  show={true}
  onOpenChange={(e) => console.log(e)}
  height={100}
>
  <CollapsibleTrigger>
    <View className="rounded-md border border-gray-300 dark:border-gray-500 px-4 py-3 flex flex-row w-full">
      <Text className="text-base text-gray-800 flex-1 dark:text-gray-200">
        @sidcn
      </Text>
      <ChevronDown className="ml-auto" color="#9f9f9f" size={20} />
    </View>
  </CollapsibleTrigger>
  <CollapsibleContent className="flex flex-col space-y-2">
    <View className="rounded-md border border-gray-300 dark:border-gray-500 px-4 py-3 mt-1">
      <Text className="text-base text-gray-800 dark:text-gray-200">
        @sidcn/ui
      </Text>
    </View>
    <View className="rounded-md border border-gray-300 dark:border-gray-500 px-4 py-3 mt-1">
      <Text className=" text-base text-gray-800 dark:text-gray-200">
        @sidcn/utils
      </Text>
    </View>
  </CollapsibleContent>
</Collapsible>

Checkbox Input