Accordion

accordion-1779393693103.tsx

'use client'
import { useState } from 'react'

const ITEMS = [
  { id: 1, title: 'What is Empire UI?', content: 'Empire UI is a library of 17,500 AI-generated React components.' },
  { id: 2, title: 'How to install?', content: 'Install via npm or use our MCP server for direct component generation.' },
  { id: 3, title: 'Is it free?', content: 'We offer a free tier with core components and a Pro plan for advanced features.' },
]

export default function Accordion({ items = ITEMS, multiple = false }) {
  const [open, setOpen] = useState(new Set([1]))
  const toggle = (id) => {
    setOpen(prev => {
      const next = new Set(multiple ? prev : [])
      if (prev.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      {items.map(item => (
        <div key={item.id} style={{
          border: '1px solid ' + (open.has(item.id) ? '#ddd6fe' : '#e2e8f0'),
          borderRadius: '12px', overflow: 'hidden', transition: 'border 0.2s',
        }}>
          <button
            onClick={() => toggle(item.id)}
            style={{
              width: '100%', display: 'flex', justifyContent: 'space-between',
              alignItems: 'center', padding: '16px 18px', border: 'none',
              background: open.has(item.id) ? '#faf5ff' : '#fff',
              cursor: 'pointer', fontSize: '15px', fontWeight: 600, color: '#1e293b',
              textAlign: 'left', transition: 'background 0.2s',
            }}
          >
            {item.title}
            <span style={{
              transform: open.has(item.id) ? 'rotate(180deg)' : 'none',
              transition: 'transform 0.3s', color: '#6d28d9', fontSize: '18px',
            }}>▾</span>
          </button>
          {open.has(item.id) && (
            <div style={{ padding: '0 18px 16px', fontSize: '14px', color: '#64748b', lineHeight: 1.6 }}>
              {item.content}
            </div>
          )}
        </div>
      ))}
    </div>
  )
}

Component info

CategoryLayouts

Frameworkreact

TierFREE

Copies0

About

Animated accordion with single or multiple open panels

More from Layouts

'use client'
import { useState, useRef, useCallback, useEffect } from 'react'

export default function SplitPane() {
  const [split, setSplit] = useState(50)
  const [dragging, setDragging] = useState(false)
  const [collapsed, setCollapsed] = useSta

SplitPane

Layouts

'use client'
import { useState } from 'react'

interface Block {
  id: number
  label: string
  color: string
  colSpan: number
  rowSpan: number
}

const INITIAL: Block[] = [
  { id: 1, label: 'Header', color: '#C9A84C', colSpan: 12, rowSpan: 1 },

GridLayout

Layouts

'use client'
import { useState } from 'react'

const INIT = [
  { id:1, label:'Design System Audit', priority:'P1' },
  { id:2, label:'API Integration', priority:'P2' },
  { id:3, label:'Performance Review', priority:'P1' },
  { id:4, label:'Mobile R

DragList

Layouts

'use client'
import { useState, useRef, useMemo } from 'react'

const ITEM_HEIGHT = 56
const VISIBLE_COUNT = 8

const ALL_ITEMS = Array.from({ length: 10000 }, (_, i) => ({
  id: i + 1,
  name: 'Item ' + String(i+1).padStart(4,'0'),
  value: Math.flo

VirtualList

Layouts