Docs
Collapsible
Collapsible
An interactive component which expands/collapses a panel.
import type { CollapsibleTriggerProps } from "@kobalte/core/collapsible";
import { Button } from "@repo/tailwindcss/ui/button";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@repo/tailwindcss/ui/collapsible";
import { createSignal } from "solid-js";
const CollapsibleDemo = () => {
const [isOpen, setIsOpen] = createSignal(false);
return (
<Collapsible
open={isOpen()}
onOpenChange={setIsOpen}
class="w-350px space-y-2"
>
<div class="flex items-center justify-between space-x-4 px-4">
<h4 class="text-sm font-semibold">
@RyanCarniato starred 2 repositories
</h4>
<CollapsibleTrigger
as={(props: CollapsibleTriggerProps) => (
<Button variant="ghost" size="sm" class="w-9 p-0" {...props}>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m8 9l4-4l4 4m0 6l-4 4l-4-4"
/>
</svg>
<span class="sr-only">Toggle</span>
</Button>
)}
/>
</div>
<div class="rounded-md border px-4 py-3 font-mono text-sm">solid-js</div>
<CollapsibleContent class="space-y-2">
<div class="rounded-md border px-4 py-3 font-mono text-sm">
solid-start
</div>
</CollapsibleContent>
</Collapsible>
);
};
export default CollapsibleDemo;Installation
npx shadcn-solid@latest add collapsibleInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
import { cn } from "@/libs/cn";
import type { CollapsibleContentProps } from "@kobalte/core/collapsible";
import { Collapsible as CollapsiblePrimitive } from "@kobalte/core/collapsible";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
export const Collapsible = CollapsiblePrimitive;
export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
type collapsibleContentProps<T extends ValidComponent = "div"> =
CollapsibleContentProps<T> & {
class?: string;
};
export const CollapsibleContent = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, collapsibleContentProps<T>>,
) => {
const [local, rest] = splitProps(props as collapsibleContentProps, ["class"]);
return (
<CollapsiblePrimitive.Content
class={cn(
"animate-collapsible-up data-[expanded]:animate-collapsible-down",
local.class,
)}
{...rest}
/>
);
};Update config:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
"collapsible-down": {
from: { height: 0 },
to: { height: "var(--kb-collapsible-content-height)" }
},
"collapsible-up": {
from: { height: "var(--kb-collapsible-content-height)" },
to: { height: 0 }
}
},
animation: {
"collapsible-down": "collapsible-down 0.2s ease-out",
"collapsible-up": "collapsible-up 0.2s ease-out"
}
}
}
};Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
import { cn } from "@/libs/cn";
import type { CollapsibleContentProps } from "@kobalte/core/collapsible";
import { Collapsible as CollapsiblePrimitive } from "@kobalte/core/collapsible";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import type { ValidComponent } from "solid-js";
import { splitProps } from "solid-js";
export const Collapsible = CollapsiblePrimitive;
export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
type collapsibleContentProps<T extends ValidComponent = "div"> =
CollapsibleContentProps<T> & {
class?: string;
};
export const CollapsibleContent = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, collapsibleContentProps<T>>,
) => {
const [local, rest] = splitProps(props as collapsibleContentProps, ["class"]);
return (
<CollapsiblePrimitive.Content
class={cn(
"animate-collapsible-up data-[expanded]:animate-collapsible-down",
local.class,
)}
{...rest}
/>
);
};Update config:
export default defineConfig({
themes: {
animation: {
keyframes: {
"collapsible-down":
"{ from { height: 0 } to { height: var(--kb-collapsible-content-height) } }",
"collapsible-up":
"{ from { height: var(--kb-collapsible-content-height) } to { height: 0 } }"
},
timingFns: {
"collapsible-down": "ease-out",
"collapsible-up": "ease-out",
},
durations: {
"collapsible-down": "0.2s",
"collapsible-up": "0.2s",
}
}
}
});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>