easeul

Radix UIKeyframes

Accordion

Identical state contract to Collapsible, and the preset is the same one. The panel takes a single element child, which is the part that gets clipped.

Radix UI documentation1.6.7

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

withoutno attribute

with easefuldata-motion="collapse"

host writes

data-state="open" | "closed"

easeful matches

[data-motion~="collapse"][data-state="closed"]

what runs

animation: motion-exit, motion-collapse-exit

you write

<Accordion.Content data-motion="collapse" />

Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

  1. Accordion.Root
  2. Accordion.Item
  3. Accordion.Header
  4. Accordion.Trigger
  5. Accordion.Contentdata-motion="collapse"

Source

apps/docs/components/demos/radix/accordion.tsx
24 lines
"use client"

import { Accordion } from "radix-ui"
import type { DemoProps } from "@/components/demos/props"

export function RadixAccordion({ motion }: DemoProps) {
  return (
    <Accordion.Root type="single" collapsible>
      <Accordion.Item value="one">
        <Accordion.Header style={{ margin: 0 }}>
          <Accordion.Trigger className="btn">What ships to the browser?</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Content data-motion={motion}>
          <div className="panel" style={{ marginTop: 12 }}>
            <p className="panel__body">
              CSS only. A grid row carries the collapse, so one preset covers both components and
              neither reads a height variable.
            </p>
          </div>
        </Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  )
}
The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.