Get Started
Components
- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button Group
- Button
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Container
- Context Menu
- Data Table
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Flex
- Form
- Grid
- Hero Button
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Responsive
- Scroll Area
- Segmented Control
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spacer
- Spinner
- Squircle
- Switch
- Table
- Tabs
- Textarea
- Theme Toggle
- Toggle Group
- Toggle
- Tooltip
- Typography
- Unicorn Wrapper
Animations
- Background Image Parallax
- Card Swipe Carousel
- Cards Parallax
- Parallax Scroll
- Perspective Carousel
- Perspective Section Transition
- Scroll Expand
- Scroll Fade
- Scroll Scale
- Slide Down
- Slide Up
- Smooth Parallax Scroll
- Smooth Scroll
- Sticky Footer
- Text Along Path
- Text Gradient Opacity
- Text Parallax
- Transforms 3d
- Zoom Parallax
A vertically stacked set of interactive headings that each reveal a section of content.
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"
export function AccordionDemo() {
return (
<Accordion
type="single"
collapsible
className="w-full"
defaultValue="item-1"
>
<AccordionItem value="item-1">
<AccordionTrigger>Product Information</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<p>
Our flagship product combines cutting-edge technology with sleek
design. Built with premium materials, it offers unparalleled
performance and reliability.
</p>
<p>
Key features include advanced processing capabilities, and an
intuitive user interface designed for both beginners and experts.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Shipping Details</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<p>
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.
</p>
<p>
All orders are carefully packaged and fully insured. Track your
shipment in real-time through our dedicated tracking portal.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Return Policy</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<p>
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.
</p>
<p>
Our hassle-free return process includes free return shipping and
full refunds processed within 48 hours of receiving the returned
item.
</p>
</AccordionContent>
</AccordionItem>
</Accordion>
)
}
Installation
pnpm dlx pitsi@latest add accordion
Usage
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>