@darksnow-ui/accordion

A collapsible content component built on Radix UI with smooth animations.

Installation

npm install @darksnow-ui/accordion @radix-ui/react-accordion @radix-ui/react-icons
# or
yarn add @darksnow-ui/accordion @radix-ui/react-accordion @radix-ui/react-icons
# or
pnpm add @darksnow-ui/accordion @radix-ui/react-accordion @radix-ui/react-icons

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@darksnow-ui/accordion"

export function Example() {
  return (
    <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>
      
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that match the other components.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Components

Accordion

The root container component.

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | "single" \| "multiple" | - | Whether one or multiple items can be opened | | collapsible | boolean | - | Whether items can be collapsed | | defaultValue | string \| string[] | - | Default expanded item(s) | | value | string \| string[] | - | Controlled expanded item(s) | | onValueChange | (value: string \| string[]) => void | - | Callback when expansion changes |

AccordionItem

Individual accordion item container.

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | - | Unique identifier for the item | | disabled | boolean | false | Whether the item is disabled | | className | string | - | Additional CSS classes |

AccordionTrigger

Clickable header that toggles the content.

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | - | Additional CSS classes | | children | ReactNode | - | Trigger content |

AccordionContent

Collapsible content area.

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | - | Additional CSS classes | | children | ReactNode | - | Content |

Examples

Basic 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>

Multiple Items Open

<Accordion type="multiple">
  <AccordionItem value="item-1">
    <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
    <AccordionContent>
      Yes, when type is set to "multiple".
    </AccordionContent>
  </AccordionItem>
  
  <AccordionItem value="item-2">
    <AccordionTrigger>How do I style it?</AccordionTrigger>
    <AccordionContent>
      You can customize styles using className props.
    </AccordionContent>
  </AccordionItem>
</Accordion>

FAQ Example

<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="faq-1">
    <AccordionTrigger>What payment methods do you accept?</AccordionTrigger>
    <AccordionContent>
      We accept all major credit cards, PayPal, and bank transfers.
      For enterprise customers, we also offer invoice billing.
    </AccordionContent>
  </AccordionItem>
  
  <AccordionItem value="faq-2">
    <AccordionTrigger>How do I cancel my subscription?</AccordionTrigger>
    <AccordionContent>
      You can cancel your subscription at any time from your account settings.
      Your access will continue until the end of your current billing period.
    </AccordionContent>
  </AccordionItem>
  
  <AccordionItem value="faq-3">
    <AccordionTrigger>Do you offer refunds?</AccordionTrigger>
    <AccordionContent>
      We offer a 30-day money-back guarantee for all new subscriptions.
      Contact our support team to process your refund request.
    </AccordionContent>
  </AccordionItem>
  
  <AccordionItem value="faq-4">
    <AccordionTrigger>Is there a free trial?</AccordionTrigger>
    <AccordionContent>
      Yes! We offer a 14-day free trial with full access to all features.
      No credit card required to start your trial.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Controlled Accordion

const [value, setValue] = useState<string>("")

<Accordion 
  type="single" 
  collapsible 
  value={value} 
  onValueChange={setValue}
>
  <AccordionItem value="item-1">
    <AccordionTrigger>Controlled Item 1</AccordionTrigger>
    <AccordionContent>
      This accordion is controlled by state.
    </AccordionContent>
  </AccordionItem>
  
  <AccordionItem value="item-2">
    <AccordionTrigger>Controlled Item 2</AccordionTrigger>
    <AccordionContent>
      The value is: {value || "none"}
    </AccordionContent>
  </AccordionItem>
</Accordion>

With Rich Content

import { Badge } from "@darksnow-ui/badge"
import { Button } from "@darksnow-ui/button"

<Accordion type="single" collapsible>
  <AccordionItem value="features">
    <AccordionTrigger>
      <div className="flex items-center gap-2">
        Features
        <Badge variant="secondary">New</Badge>
      </div>
    </AccordionTrigger>
    <AccordionContent>
      <div className="space-y-4">
        <ul className="list-disc list-inside space-y-2">
          <li>Advanced data tables with sorting and filtering</li>
          <li>Responsive components for all screen sizes</li>
          <li>Dark mode support out of the box</li>
          <li>Accessibility features built-in</li>
        </ul>
        
        <div className="flex gap-2">
          <Button size="sm">Learn More</Button>
          <Button variant="outline" size="sm">Documentation</Button>
        </div>
      </div>
    </AccordionContent>
  </AccordionItem>
</Accordion>

Disabled Item

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Available Item</AccordionTrigger>
    <AccordionContent>
      This item is available and can be opened.
    </AccordionContent>
  </AccordionItem>
  
  <AccordionItem value="item-2" disabled>
    <AccordionTrigger>Disabled Item</AccordionTrigger>
    <AccordionContent>
      This content won't be shown because the item is disabled.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Default Open Item

<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>This item opens by default</AccordionTrigger>
    <AccordionContent>
      This accordion item is open when the component first renders.
    </AccordionContent>
  </AccordionItem>
  
  <AccordionItem value="item-2">
    <AccordionTrigger>This item starts closed</AccordionTrigger>
    <AccordionContent>
      This content is hidden by default.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Styling

The accordion components use these CSS classes:

• AccordionItem: border-b border-theme-mark-light
• AccordionTrigger: flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left
• AccordionContent: overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down

The component includes smooth expand/collapse animations using CSS animations.

Accessibility

• Full keyboard navigation support
• Screen reader friendly with proper ARIA attributes
• Focus management with visible focus indicators
• Follows WAI-ARIA accordion pattern
• Supports both single and multiple item expansion

Theming

The accordion uses CSS custom properties for theming:

• --theme-mark-light - Border color between items
• --theme-content-muted - Chevron icon color

Technical Details

• Built on Radix UI Accordion primitive
• Uses clsx for conditional class names
• Includes smooth animations for content expansion
• Supports both controlled and uncontrolled usage
• TypeScript support with proper type inference

License

MIT © DarkSnow UI