Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Create New Item Sheet for React

A Create New button opens a right-side sheet for an item name, description, and price, with Cancel and Create in the footer.

The title is Create New Item. The line under it says Add a new item to your collection. Item Name, Description, and Price are empty. Cancel and Create fill the footer.

Use it to add a record without navigating away. Confirm leaving in an Alert Dialog if Cancel would drop text they typed. In React, Base UI does not save the item.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Sheet anatomy: content, close, title, description, footer

Usage

<Sheet>
  <SheetTrigger render={<Button />}>Create New</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Create New Item</SheetTitle>
      <SheetDescription>Add a new item to your collection.</SheetDescription>
    </SheetHeader>
    <FieldGroup className="gap-4 p-4">
      <Field>
        <FieldLabel htmlFor="item-name">Item Name</FieldLabel>
        <Input id="item-name" placeholder="Enter item name" type="text" />
      </Field>
      <Field>
        <FieldLabel htmlFor="item-description">Description</FieldLabel>
        <Input
          id="item-description"
          placeholder="Enter description"
          type="text"
        />
      </Field>
      <Field>
        <FieldLabel htmlFor="item-price">Price</FieldLabel>
        <Input id="item-price" placeholder="0.00" type="number" />
      </Field>
    </FieldGroup>
    <SheetFooter>
      <SheetClose render={<Button className="w-full" variant="outline" />}>
        Cancel
      </SheetClose>
      <Button className="w-full">Create</Button>
    </SheetFooter>
{/* The rest of the file is under Installation. */}

FAQ

Which fields does the item form have?

Item Name and Description are text inputs, and Price is type="number" with 0.00 as its placeholder. Each sits in a Field with its label.

How does Cancel close the sheet?

It's wrapped in SheetClose, which closes the sheet when pressed. Use the same part for any button that should dismiss the panel. Pass your button to SheetClose with render.

Does Create close the sheet?

No, it's a plain Button. Save the item, then close the sheet by controlling its open state: Pass open to Sheet; onOpenChange receives the next boolean.

How does Create New open the sheet?

The button labeled Create New is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

What does the sheet announce?

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Create New Item, with Add a new item to your collection as the description.

API Reference

Sheet

No extra props in this demo. The rest is on the Sheet page.

Button

Sets variant="outline". The rest is on the Button page.

Field

Sets htmlFor="item-name", htmlFor="item-description" and htmlFor="item-price". The rest is on the Field page.

Input

Sets id="item-name", placeholder="Enter item name", type="text", id="item-description", placeholder="Enter description" and id="item-price". The rest is on the Input page.

All 29 sheet examples