Accordion
You can edit 8 Components for free. Get premium for unlimited access.
A vertically stacked set of interactive headings that each reveal a section of content.
Figma
The Collapse component is used to answer questions within an FAQ section.
1. Reference
This component inherits props from the Collapse.
2. Type
You can edit the type with the default or title parameter.
Image 2.1 : Type title
Image 2.2 : Type default
3. State
You can edit the state with the default, expand or disabled parameter.
Image 3.1 : State default
Image 3.2 : State expand
Image 3.3 : State disabled
SwiftUI
The DLCollapse component is used to answer questions within an FAQ section.
1. Reference
This component inherits props from the Collapse.
-
-
2. Type
You can edit the type with the .normal or .title parameter.
Title
Collapse
Collapse
Lorem ipsum dolor sit amet.
title: "Collapse"
)
DLCollapse(
title: "Collapse",
description: "Lorem ipsum dolor sit amet.",
state: .normal
)
DLCollapse(
title: "Collapse",
description: "Lorem ipsum dolor sit amet.",
state: .normal
)
3. State
You can edit the state with the .normal or .disabled parameter.
Collapse
Collapse
title: "Collapse",
description: "Lorem ipsum dolor sit amet.",
state: .normal
)
DLCollapse(
title: "Collapse",
state: .disabled
)
Jetpack Compose
The Collapse component is used to answer questions within an FAQ section.
1. Reference
This component inherits props from the Collapse.
-
-
2. Type
You can edit the type with the CollapseType.title or CollapseType.default parameter.
Title
Collapse
title = "Collapse",
type = CollapseType.title
)
Collapse(
title = "Collapse",
state = CollapseState.default
)
3. State
You can edit the state with the CollapseState.default, CollapseState.disabled or CollapseState.expand parameter.
Collapse
Collapse
Collapse
Lorem ipsum dolor sit amet.
title = "Collapse",
type = CollapseType.default
state = CollapseState.default
)
Collapse(
title = "Collapse",
type = CollapseType.default
state = CollapseState.disabled
)
Collapse(
title = "Collapse",
description = "Lorem ipsum dolor sit amet.",
state = CollapseState.expand
)
Preview
Preview
Code
Product information
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
Shipping Details
We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days, while express shipping ensures delivery within 1-2 business days.
Return Policy
We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition.
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarDemo() {
return (
<div className="flex flex-row flex-wrap items-center gap-12">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar className="rounded-lg">
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
<div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
src="https://github.com/evilrabbit.png"
alt="@evilrabbit"
/>
<AvatarFallback>ER</AvatarFallback>
</Avatar>
</div>
</div>
)
}About
The Accordion component is built using the React Native Reanimated and React Native svg library.
Installation
Use this command to install the component in your project.
pnpm dlx shadcn@latest add accordionUsage
Add this code example to your project to see how the component works.
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>Discover more content
You have questions or need help?
You want to try?
Save time and money?