Skip to content

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

Free

Create New Item Sheet for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not save the item.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Sheet>
  <SheetTrigger :asChild="true"><Button>Create New</Button></SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Create New Item</SheetTitle>
      <SheetDescription>Add a new item to your collection.</SheetDescription>
    </SheetHeader>
    <FieldGroup class="gap-4 p-4">
      <Field>
        <FieldLabel>Item Name</FieldLabel>
        <Input placeholder="Enter item name" type="text" />
      </Field>
      <Field>
        <FieldLabel>Description</FieldLabel>
        <Input placeholder="Enter description" type="text" />
      </Field>
      <Field>
        <FieldLabel>Price</FieldLabel>
        <Input placeholder="0.00" type="number" />
      </Field>
    </FieldGroup>
    <SheetFooter>
      <SheetClose :asChild="true">
        <Button class="w-full" variant="outline">Cancel</Button>
      </SheetClose>
      <Button class="w-full">Create</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

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. Wrap your button in SheetClose with asChild.

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 and listen to @open-change, which receives details.open.

How does Create New open the sheet?

The button labeled Create New is the trigger, and its text is the accessible name. SheetTrigger takes asChild and merges onto the one Button inside it.

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

Sets asChild. The rest is on the Sheet page.

Button

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

Field

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

Input

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

All 29 sheet examples