Collapsible

import { Box, Collapsible } from "@chakra-ui/react"


const Demo = () => (
  <Collapsible.Root>
    <Collapsible.Trigger paddingY="3">Toggle Collapsible</Collapsible.Trigger>
    <Collapsible.Content>
      <Box padding="4" borderWidth="1px">
        <strong>Chakra UI</strong> embraces this philosophy in the world of
        design and development. Just like chakras align energy in the body,
        Chakra UI aligns your design system — bringing flow, consistency, and
        peace of mind to your codebase. It helps developers focus on creating
        beautiful, accessible UIs without friction.
        <br />
        <br />
        Think of each component as a wheel in your app’s UI — smooth, connected,
        and full of potential. Build with harmony. Build with
        <strong>Chakra UI</strong>.
      </Box>
    </Collapsible.Content>
  </Collapsible.Root>
)

import { Collapsible, Stack } from "@chakra-ui/react"
import { LuChevronRight } from "react-icons/lu"
import LoremIpsum from "react-lorem-ipsum"


const Demo = () => (
  <Collapsible.Root defaultOpen>
    <Collapsible.Trigger
      paddingY="3"
      display="flex"
      gap="2"
      alignItems="center"
    >
      <Collapsible.Indicator
        transition="transform 0.2s"
        _open={{ transform: "rotate(90deg)" }}
      >
        <LuChevronRight />
      </Collapsible.Indicator>
      Toggle
    </Collapsible.Trigger>
    <Collapsible.Content>
      <Stack padding="4" borderWidth="1px">
        <LoremIpsum p={2} />
      </Stack>
    </Collapsible.Content>
  </Collapsible.Root>
)

"use client"

import { Button, Collapsible, Stack } from "@chakra-ui/react"
import { LuChevronDown } from "react-icons/lu"
import { LoremIpsum } from "react-lorem-ipsum"


const Demo = () => (
  <Collapsible.Root collapsedHeight="100px">
    <Collapsible.Content
      _closed={{
        shadow: "inset 0 -12px 12px -12px var(--shadow-color)",
        shadowColor: "blackAlpha.500",
      }}
    >
      <Stack padding="4" borderWidth="1px" rounded="l2">
        <LoremIpsum p={1} />
        <LoremIpsum p={1} />
      </Stack>
    </Collapsible.Content>
    <Collapsible.Trigger asChild mt="4">
      <Button variant="outline" size="sm">
        <Collapsible.Context>
          {(api) => (api.open ? "Show Less" : "Show More")}
        </Collapsible.Context>
        <Collapsible.Indicator
          transition="transform 0.2s"
          _open={{ transform: "rotate(180deg)" }}
        >
          <LuChevronDown />
        </Collapsible.Indicator>
      </Button>
    </Collapsible.Trigger>
  </Collapsible.Root>
)

import { Box, Collapsible } from "@chakra-ui/react"


const Demo = () => (
  <Collapsible.Root disabled>
    <Collapsible.Trigger _disabled={{ opacity: "0.5" }}>
      Toggle (Disabled)
    </Collapsible.Trigger>
    <Collapsible.Content>
      <Box padding="4" borderWidth="1px">
        This content cannot be toggled because the collapsible is disabled using
        the <code>disabled</code> prop.
      </Box>
    </Collapsible.Content>
  </Collapsible.Root>
)

"use client"

import { Box, Collapsible, Stack } from "@chakra-ui/react"
import { useState } from "react"


const Demo = () => {
  const [open, setOpen] = useState(false)

  return (
    <Stack gap="4">
      <Box fontWeight="medium">Status: {open ? "Open" : "Closed"}</Box>
      <Collapsible.Root open={open} onOpenChange={(e) => setOpen(e.open)}>
        <Collapsible.Trigger paddingY="3">
          Toggle Collapsible
        </Collapsible.Trigger>
        <Collapsible.Content>
          <Box padding="4" borderWidth="1px">
            This collapsible is controlled by external state. You can open and
            close it using the buttons above or by clicking the trigger.
          </Box>
        </Collapsible.Content>
      </Collapsible.Root>
    </Stack>
  )
}

"use client"

import {
  Box,
  Button,
  Collapsible,
  Icon,
  Stack,
  useCollapsible,
} from "@chakra-ui/react"
import { LuChevronDown, LuChevronRight } from "react-icons/lu"


const Demo = () => {
  const collapsible = useCollapsible()

  return (
    <Stack gap="4" align="flex-start">
      <Box fontWeight="medium">
        State: {collapsible.visible ? "Expanded" : "Collapsed"}
      </Box>

      <Button
        size="sm"
        variant="subtle"
        onClick={() => collapsible.setOpen(!collapsible.open)}
      >
        Toggle
        <Icon>{collapsible.open ? <LuChevronRight /> : <LuChevronDown />}</Icon>
      </Button>

      <Collapsible.RootProvider value={collapsible}>
        <Collapsible.Content>
          <Box padding="4" borderWidth="1px" rounded="l3">
            Using the <code>useCollapsible</code> hook and{" "}
            <code>RootProvider</code> allows you to access the collapsible store
            and control the state from anywhere in your component.
          </Box>
        </Collapsible.Content>
      </Collapsible.RootProvider>
    </Stack>
  )
}

import { Box, Collapsible } from "@chakra-ui/react"


const Demo = () => (
  <Collapsible.Root unmountOnExit>
    <Collapsible.Trigger paddingY="3">
      Toggle Collapse (Unmount on exit)
    </Collapsible.Trigger>
    <Collapsible.Content>
      <Box padding="4" borderWidth="1px">
        If you inspect the DOM, you'll notice that the content is unmounted when
        collapsed. This is useful for performance reasons when you have a lot of
        collapsible content.
      </Box>
    </Collapsible.Content>
  </Collapsible.Root>
)