Sheet

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

Preview

Open

Code

import Button from '@dinui/react/button'
import Input from '@dinui/react/input'
import Label from '@dinui/react/label'
import Sheet from '@dinui/react/sheet'

export default function SheetDemo() {
  return (
    <Sheet>
      <Sheet.Trigger asChild>
        <Button variant="outline">Open</Button>
      </Sheet.Trigger>
      <Sheet.Content>
        <Sheet.Title>Edit profile</Sheet.Title>
        <Sheet.Description>
          Make changes to your profile here. Click save when you're done.
        </Sheet.Description>

        <div className="grid gap-4 mt-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input id="name" value="Pedro Duarte" 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" value="@peduarte" className="col-span-3" />
          </div>
        </div>

        <Sheet.Actions>
          <Sheet.Close asChild>
            <Button type="submit">Save changes</Button>
          </Sheet.Close>
        </Sheet.Actions>
      </Sheet.Content>
    </Sheet>
  )
}

Side

Preview

toprightbottomleft

Code

'use client'

import Button from '@dinui/react/button'
import Input from '@dinui/react/input'
import Label from '@dinui/react/label'
import Sheet from '@dinui/react/sheet'

const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const

export default function SheetSideDemo() {
  return (
    <div className="grid grid-cols-2 gap-2">
      {SHEET_SIDES.map((side) => (
        <Sheet key={side}>
          <Sheet.Trigger asChild>
            <Button variant="outline">{side}</Button>
          </Sheet.Trigger>
          <Sheet.Content side={side}>
            <Sheet.Title>Edit profile</Sheet.Title>

            <Sheet.Description>
              Make changes to your profile here. Click save when you're done.
            </Sheet.Description>

            <div className="grid gap-4 mt-4">
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="name" className="text-right">
                  Name
                </Label>
                <Input id="name" value="Pedro Duarte" 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" value="@peduarte" className="col-span-3" />
              </div>
            </div>

            <Sheet.Actions>
              <Sheet.Close asChild>
                <Button type="submit">Save changes</Button>
              </Sheet.Close>
            </Sheet.Actions>
          </Sheet.Content>
        </Sheet>
      ))}
    </div>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add sheet

   yarn

   yarn dlx @dinui/cli@latest add sheet

   pnpm

   pnpm dlx @dinui/cli@latest add sheet

   bun

   bunx @dinui/cli@latest add sheet

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-dialog tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-dialog tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-dialog tailwind-variants type-fest

   bun

   bun add @radix-ui/react-dialog tailwind-variants type-fest

3. Copy and paste the following code into your project

   'use client'
   
   import CloseButton from '@dinui/react/close-button'
   import * as SheetPrimitive from '@radix-ui/react-dialog'
   import { createContext, forwardRef, useContext } from 'react'
   import { tv, type VariantProps } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const sheet = tv({
     slots: {
       content: [
         '@container fixed z-50 gap-4 bg-bg--contrast p-6 shadow-lg',
         'transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
         'data-[state=open]:animate-in data-[state=closed]:animate-out',
       ],
       overlay: [
         'fixed inset-0 z-50 bg-[#000]/80',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       ],
       closeButton: 'absolute right-4 top-4',
       title: 'text-lg font-semibold',
       description: 'mt-2 text-sm text-fg-weaker',
       actions: 'mt-4 flex flex-col-reverse gap-2 @xs:flex-row @xs:justify-end',
     },
     variants: {
       side: {
         top: {
           content: [
             'inset-x-0 top-0 border-b',
             'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
           ],
         },
         bottom: {
           content: [
             'inset-x-0 bottom-0 border-t',
             'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
           ],
         },
         left: {
           content: [
             'inset-y-0 left-0 h-full max-w-sm w-4/5 border-r',
             'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
           ],
         },
         right: {
           content: [
             'inset-y-0 right-0 h-full max-w-sm w-4/5 border-l',
             'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
           ],
         },
       },
     },
     defaultVariants: {
       side: 'right',
     },
   })
   
   type SheetVariantProps = VariantProps<typeof sheet>
   
   const SheetContext = createContext<SheetVariantProps>(sheet.defaultVariants)
   
   const SheetContent = forwardRef<
     React.ElementRef<typeof SheetPrimitive.Content>,
     Merge<
       Merge<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, SheetVariantProps>,
       {
         portalProps?: React.ComponentProps<typeof SheetPrimitive.Portal>
         overlayProps?: React.ComponentProps<typeof SheetPrimitive.Overlay>
         closeProps?: React.ComponentProps<typeof SheetPrimitive.Close>
         closeButtonProps?: React.ComponentProps<typeof CloseButton>
       }
     >
   >(({ portalProps, overlayProps, closeProps, closeButtonProps, side, children, ...props }, ref) => {
     const variantPros = { side }
     const { content, overlay, closeButton } = sheet(variantPros)
   
     return (
       <SheetContext.Provider value={variantPros}>
         <SheetPrimitive.Portal {...portalProps}>
           <SheetPrimitive.Overlay
             {...overlayProps}
             className={overlay({ className: overlayProps?.className })}
           />
   
           <SheetPrimitive.Content
             {...props}
             ref={ref}
             className={content({ className: props.className })}
           >
             {children}
   
             <SheetPrimitive.Close {...closeProps} asChild>
               <CloseButton
                 size="sm"
                 {...closeButtonProps}
                 className={closeButton({ className: closeButtonProps?.className })}
               />
             </SheetPrimitive.Close>
           </SheetPrimitive.Content>
         </SheetPrimitive.Portal>
       </SheetContext.Provider>
     )
   })
   SheetContent.displayName = SheetPrimitive.Content.displayName
   
   const SheetTitle = forwardRef<
     React.ElementRef<typeof SheetPrimitive.Title>,
     React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
   >((props, ref) => {
     const variantPros = useContext(SheetContext)
     const { title } = sheet(variantPros)
   
     return (
       <SheetPrimitive.Title {...props} ref={ref} className={title({ className: props.className })} />
     )
   })
   SheetTitle.displayName = SheetPrimitive.Title.displayName
   
   const SheetDescription = forwardRef<
     React.ElementRef<typeof SheetPrimitive.Description>,
     React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
   >((props, ref) => {
     const variantPros = useContext(SheetContext)
     const { description } = sheet(variantPros)
   
     return (
       <SheetPrimitive.Description
         {...props}
         ref={ref}
         className={description({ className: props.className })}
       />
     )
   })
   SheetDescription.displayName = SheetPrimitive.Description.displayName
   
   const SheetActions = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
     (props, ref) => {
       const variantPros = useContext(SheetContext)
       const { actions } = sheet(variantPros)
   
       return <div {...props} ref={ref} className={actions({ className: props.className })} />
     },
   )
   SheetActions.displayName = 'SheetActions'
   
   export const Sheet = Object.assign(SheetPrimitive.Root, {
     Trigger: SheetPrimitive.Trigger,
     Content: SheetContent,
     Title: SheetTitle,
     Description: SheetDescription,
     Actions: SheetActions,
     Close: SheetPrimitive.Close,
   })
   
   export default Sheet
   export { sheet, SheetPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.