Sheet

A sheet of glass that floats up from the bottom and can be pulled back down.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/sheet

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

Usage#

import { Sheet } from "@/components/liquikit/sheet"

<Sheet.Root>
  <Sheet.Trigger>Share…</Sheet.Trigger>
  <Sheet.Popup>
    <Sheet.Title>Share</Sheet.Title>
    <Sheet.Close>Cancel</Sheet.Close>
  </Sheet.Popup>
</Sheet.Root>

API Reference#

Sheet.Root

Takes every prop of Base UI's drawer, plus className and style.

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`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"
`children`	`ReactNode` The content.	—

Also takes every prop of Base UI's drawer, plus className and style.

Select Slider