Ember UI LogoEmber UI
Components

Accordion

A accordion component

Preview

Loading...
import {  Accordion,  AccordionContent,  AccordionItem,  AccordionTrigger,} from "@/registry/axon/ui/accordion";export default function AccordionDemo() {  return (    <Accordion      className="w-full"      collapsible      defaultValue="item-1"      type="single"    >      <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&apos;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

CLI

npx shadcn@latest add @emberui/accordion
yarn shadcn@latest add @emberui/accordion
pnpm dlx shadcn@latest add @emberui/accordion
bunx --bun shadcn@latest add @emberui/accordion

Reference

This component is based on the shadcn/ui Accordion component.

On this page