Sheet

A panel that slides in from any edge, with swipe-to-dismiss, scroll lock and stacked nesting.

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/sheet

npx layro-cli add @preetsuthar17/sheet

npx layro-cli add @preetsuthar17/sheet

bunx layro-cli add @preetsuthar17/sheet

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client"

import * as React from "react"
import { Drawer as SheetPrimitive } from "@base-ui/react/drawer"
import { IconX } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { Button } from "@/components/ui/button"

type ClassName<State> =
  string | ((state: State) => string | undefined) | undefined

function mergeClassName<State>(base: string, className: ClassName<State>) {

Free, with GitHub, Google or email. The install command above works without an account.

Versions

1.0.0 · current
Nov 7, 2026
First release.

Similar components

View all

Family Drawer

Transition Panel