shadcn.io is an independent project built on shadcn/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 Solid, Ark UI does not save the item.
Installation
Anatomy
Usage
<Sheet>
<SheetTrigger asChild={props => <Button {...props()}>Create New</Button>} />
<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={props => <Button {...props({
"class": "w-full"
})} variant="outline">
Cancel
</Button>} />
<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.
asChild on SheetClose receives props: spread them onto the button.
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 read details.open in onOpenChange.
API Reference
Sheet
Sets asChild and props. The rest is on the Sheet page.
Button
Sets props, w-full and 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.
