Collapsible

Component

Preview

Preview solid

Usage

import { createSignal } from "solid-js"
import { Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Button } from "@/components/ui/button"

export function CollapsibleDemo() {
const [isOpen, setIsOpen] = createSignal(false)

return (
  <Collapsible
    open={isOpen()}
    onOpenChange={setIsOpen}
  >
    <CollapsibleItem value="item-1">
      <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
      <CollapsibleContent>
        Yes. You can use this component in your projects.
      </CollapsibleContent>
    </CollapsibleItem>
  </Collapsible>
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/collapsible.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/collapsible.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/collapsible.json

Manual

components/ui/collapsible.tsx

import { Accordion as AccordionPrimitives } from "@ark-ui/solid"
import { IconChevronDown } from "@tabler/icons-solidjs"
import { splitProps } from "solid-js"
import { cn } from "@/lib/utils"

const Collapsible = (props: AccordionPrimitives.RootProps) => (
  <AccordionPrimitives.Root data-slot="collapsible" {...props} />
)

const CollapsibleTrigger = (props: AccordionPrimitives.ItemTriggerProps) => {
  const [local, rest] = splitProps(props, ["class", "children"])
  return (
    <AccordionPrimitives.ItemTrigger
      class={cn(
        "flex w-full items-center justify-between rounded-md px-4 py-2 text-sm font-medium transition-all hover:bg-accent hover:text-accent-foreground [&[data-state=open]>svg]:rotate-180",
        local.class,
      )}
      {...rest}
    >
      {local.children}
      <IconChevronDown class="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitives.ItemTrigger>
  )
}

const CollapsibleContent = (props: AccordionPrimitives.ItemContentProps) => {
  const [local, rest] = splitProps(props, ["class", "children"])
  return (
    <AccordionPrimitives.ItemContent
      class={cn(
        "overflow-hidden text-sm data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",
        local.class,
      )}
      {...rest}
    >
      <div class="px-4 py-2">{local.children}</div>
    </AccordionPrimitives.ItemContent>
  )
}

const CollapsibleItem = (props: AccordionPrimitives.ItemProps) => {
  const [local, rest] = splitProps(props, ["class"])
  return <AccordionPrimitives.Item class={cn("border-b", local.class)} {...rest} />
}

export { Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger }