Accordion

Sections that open on a spring inside one slab of glass. The file also has a single collapsible.

Connected to Home. Networks you have joined before connect on their own.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/accordion

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { Accordion } from "@/components/liquikit/accordion"

<Accordion.Root defaultValue={["wifi"]}>
  <Accordion.Item value="wifi">
    <Accordion.Trigger>Wi-Fi</Accordion.Trigger>
    <Accordion.Panel>Connected to Home.</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

Pass multiple to Accordion.Root to let more than one section stay open.

Examples#

Collapsible#

One section on its own. The trigger is a glass button.

API Reference#

Accordion.Root

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"

Limitations Alert