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>
)
}