Actions & overlays@neumorphism-ui/sheet

Sheet

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

@neumorphism-ui/sheet

Registry JSON

Preview

Installation

npx shadcn@latest add @neumorphism-ui/sheet

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

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

Import

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Sheet, SheetTrigger, SheetContent, SheetTitle, SheetDescription, SheetClose } from "@/components/ui/sheet";
import { Field, FieldLabel, FieldControl, FieldDescription, FieldError } from "@/components/ui/field";

Example

export default function Example() {
  const [name, setName] = React.useState("Alex");
  const nameField = <Field name="displayName"><FieldLabel>{"Display name"}</FieldLabel><FieldControl required value={name} onValueChange={setName} /><FieldDescription>{"Enter the name shown on your profile."}</FieldDescription><FieldError match="valueMissing">{"Enter a name."}</FieldError></Field>;
  return (<Sheet><SheetTrigger render={<Button />}>{"Profile settings"}</SheetTrigger><SheetContent closeLabel={"Close"}><SheetTitle>{"Profile settings"}</SheetTitle><SheetDescription>{"Enter the name shown on your profile."}</SheetDescription>{nameField}<SheetClose render={<Button variant="primary" />}>{"Close"}</SheetClose></SheetContent></Sheet>);
}

API Reference

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.