Accordion

Usage

Jamie automatically joins your scheduled meetings, records the audio, and generates a full transcript within minutes. Transcripts are searchable and can be shared with your team.

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@jamie/ui/accordion'
 
export function AccordionDemo() {
  return (
    <Accordion defaultValue={['transcripts']} className="max-w-lg">
      <AccordionItem value="transcripts">
        <AccordionTrigger>How do meeting transcripts work?</AccordionTrigger>
        <AccordionContent>
          Jamie automatically joins your scheduled meetings, records the audio, and generates a full
          transcript within minutes. Transcripts are searchable and can be shared with your team.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="ask-ai">
        <AccordionTrigger>What can I ask Jamie AI?</AccordionTrigger>
        <AccordionContent>
          Ask Jamie to summarize key decisions, extract action items, find specific topics
          discussed, or generate follow-up emails — all from your meeting transcripts.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="action-items">
        <AccordionTrigger>How are action items tracked?</AccordionTrigger>
        <AccordionContent>
          Jamie identifies action items from your meetings and assigns them to the right team
          members. You can review, edit, and track completion directly from your dashboard.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Disabled Items

Use the disabled prop on AccordionItem to prevent interaction with specific sections.

Revenue grew 12% year-over-year, exceeding analyst expectations. Operating margin improved to 18.4%, driven by cost optimization initiatives discussed in the July board meeting.

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@jamie/ui/accordion'
 
export function AccordionDisabledDemo() {
  return (
    <Accordion defaultValue={['summary']} className="max-w-lg">
      <AccordionItem value="summary">
        <AccordionTrigger>Q3 Earnings Call Summary</AccordionTrigger>
        <AccordionContent>
          Revenue grew 12% year-over-year, exceeding analyst expectations. Operating margin improved
          to 18.4%, driven by cost optimization initiatives discussed in the July board meeting.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="forecast" disabled>
        <AccordionTrigger>Revenue Forecast (Restricted)</AccordionTrigger>
        <AccordionContent>
          This content is restricted to authorized personnel only.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="notes">
        <AccordionTrigger>Analyst Q&A Highlights</AccordionTrigger>
        <AccordionContent>
          Key questions focused on expansion into European markets and the impact of new regulatory
          requirements on compliance costs for Q4.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Rich Nested Content

Accordion panels can contain rich content including lists, links, and formatted text.

The Q3 earnings call covered three major topics identified by Jamie:

  • Revenue growth of 12% YoY across all segments
  • New enterprise client onboarding in EMEA
  • Updated guidance for Q4 — see full transcript

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@jamie/ui/accordion'
import Link from 'next/link'
 
export function AccordionNestedDemo() {
  return (
    <Accordion defaultValue={['earnings']} className="max-w-lg">
      <AccordionItem value="earnings">
        <AccordionTrigger>Q3 Earnings Summary</AccordionTrigger>
        <AccordionContent>
          <p>
            The Q3 earnings call covered <strong>three major topics</strong> identified by Jamie:
          </p>
          <ul className="list-disc space-y-1 pl-4">
            <li>
              Revenue growth of <strong>12% YoY</strong> across all segments
            </li>
            <li>New enterprise client onboarding in EMEA</li>
            <li>
              Updated guidance for Q4 — see{' '}
              <Link href="/docs/components/accordion">full transcript</Link>
            </li>
          </ul>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="actions">
        <AccordionTrigger>Action Items</AccordionTrigger>
        <AccordionContent>
          <p>Jamie extracted the following action items from the meeting:</p>
          <ol className="list-decimal space-y-1 pl-4">
            <li>
              <strong>Sarah Chen</strong> — Prepare revised forecast model by Friday
            </li>
            <li>
              <strong>Mike Torres</strong> — Schedule follow-up with EMEA compliance team
            </li>
            <li>
              <strong>All</strong> — Review updated{' '}
              <Link href="/docs/components/accordion">risk assessment document</Link> before next
              board meeting
            </li>
          </ol>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}