Accordion

Variants

glinr, plain (shadcn borders), solid, soft, outline and glass (opt-in).

import { Accordion } from "@glinui/ui"
<Accordion variant="plain" type="single" collapsible>...</Accordion>

import { Accordion } from "@glinui/ui"


<Accordion variant="plain" type="single" collapsible>...</Accordion>

Multiple open

Use type multiple with the separated look when readers compare answers.

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@glinui/ui"
export function Demo() {
  return (

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@glinui/ui"


export function Demo() {
  return (
    <Accordion type="multiple" defaultValue={["shipping", "returns"]} variant="separated" className="w-full max-w-xl">
      <AccordionItem value="shipping">
        <AccordionTrigger>Shipping</AccordionTrigger>
        <AccordionContent>Orders ship within 2 business days. Tracking is emailed once the parcel leaves our warehouse.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="returns">
        <AccordionTrigger>Returns</AccordionTrigger>
        <AccordionContent>Return unused items within 30 days for a full refund to your original payment method.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="warranty">
        <AccordionTrigger>Warranty</AccordionTrigger>
        <AccordionContent>Every product includes a two year warranty against manufacturing defects.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

In a layout

A help-center section with the FAQ beside a heading.

import { Accordion } from "@glinui/ui"
<section className="grid gap-6 md:grid-cols-[1fr_1.4fr]">
  <div>...</div>

import { Accordion } from "@glinui/ui"


<section className="grid gap-6 md:grid-cols-[1fr_1.4fr]">
  <div>...</div>
  <Accordion type="single" collapsible>...</Accordion>
</section>

Frosted Variant

Heavier frost with stronger blur and an inner glow. Toggle backgrounds above to compare.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@glinui/ui"

export function AccordionFrostedDemo() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="one" variant="frosted">
        <AccordionTrigger variant="frosted">Installation</AccordionTrigger>
        <AccordionContent variant="frosted">Run pnpm add @glinui/ui @glinui/tokens to get started.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="two" variant="frosted">
        <AccordionTrigger variant="frosted">Configuration</AccordionTrigger>
        <AccordionContent variant="frosted">Import the CSS tokens in your root layout file.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="three" variant="frosted">
        <AccordionTrigger variant="frosted">Usage</AccordionTrigger>
        <AccordionContent variant="frosted">Import components and apply variant props.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Lift accordion

The list is one lift surface with hairline dividers and a rotating caret. Items inherit the variant from the root.

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@glinui/ui"

export function Demo() {
  return (
    <Accordion type="single" collapsible variant="lift">
      <AccordionItem value="1">
        <AccordionTrigger>Is it free?</AccordionTrigger>
        <AccordionContent>Yes, up to 10k monthly active users.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="2">
        <AccordionTrigger>Can I self-host?</AccordionTrigger>
        <AccordionContent>Yes.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Native details fallback (SSR, no JS)

Same geometry with plain details and summary for static pages. Swap to the Radix accordion after hydration without layout shift.

export function Demo() {
  return (
    <div className="overflow-hidden rounded-xl border border-transparent [box-shadow:var(--elev-2)] [background:var(--sheen)_padding-box,linear-gradient(var(--face-0),var(--face-0))_padding-box,var(--ring)_border-box]">
      <details className="group border-b border-[var(--line-soft)] last:border-b-0">
        <summary className="flex cursor-pointer list-none items-center justify-between px-4 py-3.5 text-sm font-medium [&::-webkit-details-marker]:hidden">
          Is it free?
          <span className="transition-transform group-open:rotate-180" aria-hidden="true">v</span>
        </summary>
        <p className="px-4 pb-4 text-sm text-[var(--color-muted)]">Yes.</p>
      </details>
    </div>
  )
}

Keyboard Interactions

ARIA Attributes

• `role="region"` on content
• `aria-expanded` on trigger
• `aria-controls` linking trigger to content

Affected properties

Accordion

AccordionItem

AccordionTrigger

AccordionContent