Accordion
Installation
No MCP yet? Connect your agent.
Agent guide
Add the cn helper and the theme color variables the files useWhen: The project has no components.json file.From the collection
Related items
Requires
React Native ReusablesNo MCP yet? Connect your agent.
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import { Text } from '@/components/ui/text';
<Accordion type='single' collapsible>
<AccordionItem value='item-1'>
<AccordionTrigger>
<Text>Is it accessible?</Text>
</AccordionTrigger>
<AccordionContent>
<Text>Yes. It adheres to the WAI-ARIA design pattern.</Text>
</AccordionContent>
</AccordionItem>
</Accordion>
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import { Text } from '@/components/ui/text';
export function AccordionPreview() {
return (
<Accordion type="single" collapsible className="w-full max-w-lg" defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>
<Text>Product Information</Text>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<Text>
Our flagship product combines cutting-edge technology with sleek design. Built with
premium materials, it offers unparalleled performance and reliability.
</Text>
<Text>
Key features include advanced processing capabilities, and an intuitive user interface
designed for both beginners and experts.
</Text>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>
<Text>Shipping Details</Text>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<Text>
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.
</Text>
<Text>
All orders are carefully packaged and fully insured. Track your shipment in real-time
through our dedicated tracking portal.
</Text>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>
<Text>Return Policy</Text>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<Text>
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.
</Text>
<Text>
Our hassle-free return process includes free return shipping and full refunds processed
within 48 hours of receiving the returned item.
</Text>
</AccordionContent>
</AccordionItem>
</Accordion>
);
}
The files import cn from @/lib/utils:
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Class names such as bg-background, text-muted-foreground, border-border, bg-primary, and rounded-lg resolve through these theme variables. Define them in the global CSS and map each color in the Tailwind theme as hsl(var(--name)), with --radius mapped to borderRadius.lg (md is calc(var(--radius) - 2px), sm is calc(var(--radius) - 4px)).
Light:
| Variable | Value |
|---|---|
--background | hsl(0 0% 100%) |
--foreground | hsl(0 0% 3.9%) |
--card | hsl(0 0% 100%) |
--card-foreground | hsl(0 0% 3.9%) |
--popover | hsl(0 0% 100%) |
--popover-foreground | hsl(0 0% 3.9%) |
--primary | hsl(0 0% 9%) |
--primary-foreground | hsl(0 0% 98%) |
--secondary | hsl(0 0% 96.1%) |
--secondary-foreground | hsl(0 0% 9%) |
--muted | hsl(0 0% 96.1%) |
--muted-foreground | hsl(0 0% 45.1%) |
--accent | hsl(0 0% 96.1%) |
--accent-foreground | hsl(0 0% 9%) |
--destructive | hsl(0 84.2% 60.2%) |
--border | hsl(0 0% 89.8%) |
--input | hsl(0 0% 89.8%) |
--ring | hsl(0 0% 63%) |
--radius | 0.625rem |
Dark:
| Variable | Value |
|---|---|
--background | hsl(0 0% 3.9%) |
--foreground | hsl(0 0% 98%) |
--card | hsl(0 0% 3.9%) |
--card-foreground | hsl(0 0% 98%) |
--popover | hsl(0 0% 3.9%) |
--popover-foreground | hsl(0 0% 98%) |
--primary | hsl(0 0% 98%) |
--primary-foreground | hsl(0 0% 9%) |
--secondary | hsl(0 0% 14.9%) |
--secondary-foreground | hsl(0 0% 98%) |
--muted | hsl(0 0% 14.9%) |
--muted-foreground | hsl(0 0% 63.9%) |
--accent | hsl(0 0% 14.9%) |
--accent-foreground | hsl(0 0% 98%) |
--destructive | hsl(0 70.9% 59.4%) |
--border | hsl(0 0% 14.9%) |
--input | hsl(0 0% 14.9%) |
--ring | hsl(300 0% 45%) |
--radius | 0.625rem |
Nativewind projects: the files assume 1rem is 16px, so pass inlineRem: 16 to Nativewind in metro.config.js:
module.exports = withNativeWind(config, { input: './global.css', inlineRem: 16 });
The files import cn from @/lib/utils:
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Class names such as bg-background, text-muted-foreground, border-border, bg-primary, and rounded-lg resolve through these theme variables. Define them in the global CSS and map each color in the Tailwind theme as hsl(var(--name)), with --radius mapped to borderRadius.lg (md is calc(var(--radius) - 2px), sm is calc(var(--radius) - 4px)).
Light:
| Variable | Value |
|---|---|
--background | hsl(0 0% 100%) |
--foreground | hsl(0 0% 3.9%) |
--card | hsl(0 0% 100%) |
--card-foreground | hsl(0 0% 3.9%) |
--popover | hsl(0 0% 100%) |
--popover-foreground | hsl(0 0% 3.9%) |
--primary | hsl(0 0% 9%) |
--primary-foreground | hsl(0 0% 98%) |
--secondary | hsl(0 0% 96.1%) |
--secondary-foreground | hsl(0 0% 9%) |
--muted | hsl(0 0% 96.1%) |
--muted-foreground | hsl(0 0% 45.1%) |
--accent | hsl(0 0% 96.1%) |
--accent-foreground | hsl(0 0% 9%) |
--destructive | hsl(0 84.2% 60.2%) |
--border | hsl(0 0% 89.8%) |
--input | hsl(0 0% 89.8%) |
--ring | hsl(0 0% 63%) |
--radius | 0.625rem |
Dark:
| Variable | Value |
|---|---|
--background | hsl(0 0% 3.9%) |
--foreground | hsl(0 0% 98%) |
--card | hsl(0 0% 3.9%) |
--card-foreground | hsl(0 0% 98%) |
--popover | hsl(0 0% 3.9%) |
--popover-foreground | hsl(0 0% 98%) |
--primary | hsl(0 0% 98%) |
--primary-foreground | hsl(0 0% 9%) |
--secondary | hsl(0 0% 14.9%) |
--secondary-foreground | hsl(0 0% 98%) |
--muted | hsl(0 0% 14.9%) |
--muted-foreground | hsl(0 0% 63.9%) |
--accent | hsl(0 0% 14.9%) |
--accent-foreground | hsl(0 0% 98%) |
--destructive | hsl(0 70.9% 59.4%) |
--border | hsl(0 0% 14.9%) |
--input | hsl(0 0% 14.9%) |
--ring | hsl(300 0% 45%) |
--radius | 0.625rem |
Nativewind projects: the files assume 1rem is 16px, so pass inlineRem: 16 to Nativewind in metro.config.js:
module.exports = withNativeWind(config, { input: './global.css', inlineRem: 16 });
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import { Text } from '@/components/ui/text';
<Accordion type='single' collapsible>
<AccordionItem value='item-1'>
<AccordionTrigger>
<Text>Is it accessible?</Text>
</AccordionTrigger>
<AccordionContent>
<Text>Yes. It adheres to the WAI-ARIA design pattern.</Text>
</AccordionContent>
</AccordionItem>
</Accordion>
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
import { Text } from '@/components/ui/text';
export function AccordionPreview() {
return (
<Accordion type="single" collapsible className="w-full max-w-lg" defaultValue="item-1">
<AccordionItem value="item-1">
<AccordionTrigger>
<Text>Product Information</Text>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<Text>
Our flagship product combines cutting-edge technology with sleek design. Built with
premium materials, it offers unparalleled performance and reliability.
</Text>
<Text>
Key features include advanced processing capabilities, and an intuitive user interface
designed for both beginners and experts.
</Text>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>
<Text>Shipping Details</Text>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<Text>
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.
</Text>
<Text>
All orders are carefully packaged and fully insured. Track your shipment in real-time
through our dedicated tracking portal.
</Text>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>
<Text>Return Policy</Text>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<Text>
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.
</Text>
<Text>
Our hassle-free return process includes free return shipping and full refunds processed
within 48 hours of receiving the returned item.
</Text>
</AccordionContent>
</AccordionItem>
</Accordion>
);
}