Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Sheet

Extends the Dialog component to display content that complements the main content of the screen.

code

Expend code


    <Sheet className="z-50">
      <SheetTrigger>
        <Button onClick={toggleSheet}>Open</Button>
      </SheetTrigger>
      <SheetContent sheet={sheet} toggleSheet={toggleSheet}>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here.
            <br /> Click save when you're done.
          </SheetDescription>
        </SheetHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <label htmlFor="name" className="text-right">
              Name
            </label>
            <Input id="name" type="text" placeholder="type your name." className="col-span-3" />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <label htmlFor="username" className="text-right">
              Username
            </label>
            <Input id="username" type="text" placeholder="type your username" className="col-span-3" />
          </div>
        </div>
        <SheetFooter>
          <SheetClose>
            <Button variant="contained" onClick={toggleSheet}>
              Save changes
            </Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>


    <Sheet className="z-50">
      <SheetTrigger>
        <Button onClick={toggleSheet}>Open</Button>
      </SheetTrigger>
      <SheetContent sheet={sheet} toggleSheet={toggleSheet}>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here.
            <br /> Click save when you're done.
          </SheetDescription>
        </SheetHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <label htmlFor="name" className="text-right">
              Name
            </label>
            <Input id="name" type="text" placeholder="type your name." className="col-span-3" />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <label htmlFor="username" className="text-right">
              Username
            </label>
            <Input id="username" type="text" placeholder="type your username" className="col-span-3" />
          </div>
        </div>
        <SheetFooter>
          <SheetClose>
            <Button variant="contained" onClick={toggleSheet}>
              Save changes
            </Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>

Sheet

A component used for composing a sheet for tasks like editing profiles.

Prop	Type	Default	Description
children	React.ReactNode	-	Includes the content to be displayed inside the sheet.
sheet	boolean	false	Used to control the visibility of the sheet.
toggleSheet	() => void	-	A function to toggle the opening and closing of the sheet.

SheetTrigger

Properties of the trigger button used to open the Sheet component.

Prop	Type	Default	Description
children	React.ReactNode	-	Passes content to act as the trigger element for opening the sheet.

SheetContent

Properties of the component that contains the content inside the Sheet.

Prop	Type	Default	Description
children	React.ReactNode	-	Includes the content to be displayed inside the sheet.
sheet	boolean	false	Used to control the visibility of the sheet.
toggleSheet	() => void	-	A function to toggle the opening and closing of the sheet.

SheetHeader

Element that composes the header of the Sheet.

Prop	Type	Default	Description
children	React.ReactNode	-	Includes the content to be displayed inside the header.

SheetTitle

Element that represents the title of the Sheet.

Prop	Type	Default	Description
children	React.ReactNode	-	Passes text or content used as the title of the sheet.

SheetDescription

Provides a description for the Sheet.

Prop	Type	Default	Description
children	React.ReactNode	-	Passes text or content used as a description for the sheet.

SheetFooter

Element that composes the footer area of the Sheet.

Prop	Type	Default	Description
children	React.ReactNode	-	Passes buttons or other content to be included in the footer area.

SheetClose

Element used to close the Sheet.

Prop	Type	Default	Description
children	React.ReactNode	-	Includes content like a button that provides the functionality to close the sheet.