Lazy-uiLazy UI
Star0

Accordion

A disclosure list with hairline or card rows, an optional heading column, and a CSS-only open transition that never measures or remounts a panel.

Frequently asked questions

Anything else, write to hello@lazy-ui.dev.

A copy-and-paste component library for React and Tailwind. You take the file, not a dependency — every component lands in your repo as source you can read and edit.

Yes. Once a component is in your project it is your file. Rename it, gut it, ship it in client work — there is nothing to attribute and nothing to license.

Nothing, until you decide. Pasted files never change under you. Re-run the CLI on a component when you want the newer version and diff it like any other change.

Components are animated by default and every one honours prefers-reduced-motion. Where motion is a prop, turning it off leaves a static component that still looks finished.

Tailwind v4. Components ship as utility classes plus the odd CSS variable — no config plugin, no theme file to merge, no build step of ours in your pipeline.

Every component carries its own light and dark styling through the dark: variant, so it follows whatever theme switch your app already uses.
0px

Customize

Layout
Variant
Icon
Mode
Size
Speed1.00x
Numbered
Rail

Usage

import { Accordion } from "@/components/lazy-ui/accordion";

const items = [
  {
    title: "Do I own the code I paste?",
    content:
      "Yes. Once a component is in your project it is your file — nothing to attribute, nothing to license.",
  },
  {
    title: "What happens when a component updates?",
    content:
      "Nothing, until you decide. Re-run the CLI on a component when you want the newer version.",
  },
];

export function Demo() {
  return <Accordion items={items} defaultOpen={0} />;
}