shipbase/ui

Ark UI supported frameworks

@ark-ui/react

@ark-ui/solid

@ark-ui/vue

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { ChevronsUpDown } from "lucide-react"

export default function CollapsibleDemo() {
  const [isOpen, setIsOpen] = React.useState(true)

  return (
    <Collapsible
      open={isOpen}
      onOpenChange={(details) => setIsOpen(details.open)}
      className="w-[350px] space-y-2"
    >
      <div className="flex items-center justify-between space-x-4 px-4">
        <h4 className="font-semibold text-sm">Ark UI supported frameworks</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm" className="w-9 p-0">
            <ChevronsUpDown className="h-4 w-4" />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-3 font-mono text-sm">
        @ark-ui/react
      </div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-3 font-mono text-sm">
          @ark-ui/solid
        </div>
        <div className="rounded-md border px-4 py-3 font-mono text-sm">
          @ark-ui/vue
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Installation

Copy and paste the following code into your project.

"use client"

import * as React from "react"

import { Collapsible as CollapsiblePrimitive } from "@ark-ui/react/collapsible"

import { cn } from "@/lib/utils"

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleContext = CollapsiblePrimitive.Context

const CollapsibleTrigger = CollapsiblePrimitive.Trigger

const CollapsibleContent = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>
>(({ className, ...props }, ref) => (
  <CollapsiblePrimitive.Content
    ref={ref}
    className={cn(
      "overflow-hidden transition-all data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",
      className
    )}
    {...props}
  />
))

export {
  Collapsible,
  CollapsibleContent,
  CollapsibleContext,
  CollapsibleTrigger,
}

CollapsibleContent.vue

<script setup lang="ts">
import { cn } from "@/lib/utils"
import type { HTMLAttributes } from "vue"

import {
  CollapsibleContent,
  type CollapsibleContentProps,
} from "@ark-ui/vue/collapsible"

const props = defineProps<
  CollapsibleContentProps & { class?: HTMLAttributes["class"] }
>()
</script>

<template>
  <CollapsibleContent
    v-bind="props"
    :class="cn('overflow-hidden transition-all data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down', props.class)"
  />
</template>

index.ts

export {
  CollapsibleRoot as Collapsible,
  CollapsibleContext,
  CollapsibleTrigger,
} from "@ark-ui/vue/collapsible"
export { default as CollapsibleContent } from "./CollapsibleContent.vue"

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>