Components
- Accordion
- Action Bar
- Action Toast
- Alert Banner
- Alert Dialog
- Alert
- Alphabet Index
- Amount Field
- Aspect Ratio
- Attachment
- Availability List
- Avatar
- Badge
- Bank Card
- Breadcrumb
- Bubble
- Button Group
- Button
- Calendar
- Camera Frame
- Card Design Picker
- Card Details
- Card Peek
- Card Stack
- Card
- Carousel
- Chart
- Chat Thread
- Checkbox
- Chip Group
- Choice Tile
- Code Block
- Code Dots
- Collapsible
- Combobox
- Command
- Context Menu
- Copy Field
- Countdown
- Country Select
- Data Table
- Date Field
- Date Picker
- Date Range Picker
- Dialog
- Direction
- Document Paper
- Drawer
- Dropdown Menu
- Empty
- Entity Avatar
- Field
- File Trigger
- File Upload Item
- Hover Card
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Key Value
- Keypad
- Label
- Live Region
- Marker
- Message Scroller
- Message
- Money Amount
- Native Select
- Number Field
- Pagination
- Percent Split Editor
- Phone Field
- Popover
- Progress
- QR Code
- Questionnaire
- Radio Group
- Range Histogram
- Rating
- Resizable
- Scroll Area
- Search Field
- Select
- Separator
- Share Bar
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Sortable List
- Spinner
- Status Timeline
- Step Header
- Steps List
- Swipe Row
- Switch
- Table
- Tabs
- Text Field
- Textarea
- Tier Ladder
- Toggle Group
- Toggle
- Token Search Field
- Tooltip
- Trace
- Transaction Row
- Usage Meter
Registry
We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.
Returns accepted within 30 days. Items must be unused and in original packaging. Refunds processed within 5-7 business days.
Reach us via email, live chat, or phone. We respond within 24 hours during business days.
import {
Accordion,
AccordionContent,
Installation#
pnpm dlx shadcn@latest add @dots/accordion
Usage#
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"<Accordion defaultExpandedKeys={["item-1"]}>
<AccordionItem id="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>Composition#
Use the following composition to build an Accordion:
Accordion
├── AccordionItem
│ ├── AccordionTrigger
│ └── AccordionContent
└── AccordionItem
├── AccordionTrigger
└── AccordionContentBasic#
A basic accordion that shows one item at a time. The first item is open by default.
Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.
Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle.
We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.
import {
Accordion,
AccordionContent,
Multiple#
Use the allowsMultipleExpanded prop to allow multiple items to be open at the same time.
Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.
Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account.
View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription.
import {
Accordion,
AccordionContent,
Disabled#
Use the isDisabled prop on AccordionItem to disable individual items.
Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.
This section contains information about premium features. Upgrade your plan to access this content.
You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.
import {
Accordion,
AccordionContent,
Borders#
Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.
We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.
Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols.
We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks.
import {
Accordion,
AccordionContent,
Card#
Wrap the Accordion in a Card component.
Subscription & Billing
Common questions about your account, plans, payments and cancellations.
We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.
Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.
You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.
import {
Accordion,
AccordionContent,
API Reference#
See the React Aria documentation for more information.