Sheet

Use Sheet for settings, details, or editing tasks that benefit from a panel at the edge of the screen.

Preview

Edit a profile name

Open a profile settings panel containing a controlled, required name field and a close action.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/sheet

Install the shared base once, then add components and their dependencies with the CLI.

Edit a profile name

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/sheet @neumorphism-ui/field

Registry JSON

Usage

Compose SheetTrigger, SheetContent, a title, and a description. Place fields in the panel and use SheetClose for dismissal; handle saving in application state.

"use client";

import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "@/components/ui/sheet";

export default function Example() {
  return (
    <Sheet>
      <SheetTrigger render={<Button />}>Workspace details</SheetTrigger>
      <SheetContent>
        <SheetTitle>Team workspace</SheetTitle>
        <SheetDescription>Review this workspace without leaving the page.</SheetDescription>
      </SheetContent>
    </Sheet>
  );
}

API Reference

A scrollable task panel attached to a viewport edge. Include SheetTitle and a description. Keep dismissal and the final field reachable on small screens.

Component	Prop	Type	Default	Description
`SheetContent`	`side`	`"left" \| "right" \| "top" \| "bottom"`	`—`	Set panel placement or spacing with viewport collision handling.
`SheetContent`	`closeLabel`	`string`	`—`	Accessible name of the close button.
`Sheet`	`open / onOpenChange`	`Dialog.Root.Props`	`—`	Set controlled or initial state.

Preview

Edit a profile name

Installation

Usage

API Reference

Accessibility