Get Started
Input
Feedback
Display
Installation
i18n
Order #4189
StatusShipped
"use client"
import * as React from "react"Installation#
pnpm dlx shadcn@latest add https://ui.tyap.me/r/styles/base/collapsible.jsonnpx shadcn@latest add https://ui.tyap.me/r/styles/base/collapsible.jsonyarn dlx shadcn@latest add https://ui.tyap.me/r/styles/base/collapsible.jsonbunx --bun shadcn@latest add https://ui.tyap.me/r/styles/base/collapsible.json
Install the following dependencies:
pnpm add @base-ui/reactnpm install @base-ui/reactyarn add @base-ui/reactbun add @base-ui/react
Copy and paste the following code into your project.
"use client"
import * as React from "react"
import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}
function CollapsibleTrigger({
asChild,
children,
render,
...props
}: CollapsiblePrimitive.Trigger.Props & {
asChild?: boolean
children?: React.ReactNode
}) {
const resolvedRender =
asChild && React.isValidElement(children) ? children : render
return (
<CollapsiblePrimitive.Trigger
data-slot="collapsible-trigger"
render={resolvedRender}
{...props}
>
{asChild ? undefined : children}
</CollapsiblePrimitive.Trigger>
)
}
function CollapsibleContent({
forceMount: _forceMount,
...props
}: CollapsiblePrimitive.Panel.Props & { forceMount?: boolean }) {
return (
<CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
)
}
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
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>Composition#
Use the following composition to build a Collapsible:
Collapsible
├── CollapsibleTrigger
└── CollapsibleContentControlled State#
Use the open and onOpenChange props to control the state.
import * as React from "react"
export function Example() {
const [open, setOpen] = React.useState(false)
return (
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger>Toggle</CollapsibleTrigger>
<CollapsibleContent>Content</CollapsibleContent>
</Collapsible>
)
}Examples#
Basic#
import { ChevronDownIcon } from "@/registry/icons/__lucide__"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"Settings Panel#
Use a trigger button to reveal additional settings.
Radius
Set the corner radius of the element.
"use client"
import * as React from "react"File Tree#
Use nested collapsibles to build a file tree.
import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-react"
import { Button } from "@/components/ui/button"RTL#
To enable RTL support in shadcn/ui, see the RTL configuration guide.
الطلب #4189
الحالةتم الشحن
"use client"
import * as React from "react"API Reference#
See the Base UI documentation for more information.