sheet.tsx

Overview

The sheet.tsx file defines a customizable Sheet UI component built on top of the @radix-ui/react-dialog primitive. A Sheet is a type of modal panel that slides in from one side of the viewport (top, bottom, left, or right) and overlays the main content, commonly used for navigation, options, or additional details. This file enhances the base dialog primitive with styling, animations, and a set of composable subcomponents to facilitate flexible and accessible usage within a React application.

The component leverages:

• Radix UI Dialog primitives for accessibility and behavior.

• class-variance-authority (cva) for conditional styling based on variants.

• lucide-react for icons (close icon).

• Custom utility function cn for combining class names.

Exports and Components

1. Sheet

• Type: React.ComponentType

• Source: Aliased from SheetPrimitive.Root

• Description: The root component controlling the open/close state of the Sheet. It wraps all other Sheet components.

2. SheetTrigger

• Type: React.ComponentType

• Source: Aliased from SheetPrimitive.Trigger

• Description: The interactive element (e.g. button) that opens the Sheet when clicked.

3. SheetClose

• Type: React.ComponentType

• Source: Aliased from SheetPrimitive.Close

• Description: An interactive element that closes the Sheet. Often used inside the Sheet content.

4. SheetPortal

• Type: React.ComponentType

• Source: Aliased from SheetPrimitive.Portal

• Description: Renders the Sheet components into a React Portal, typically appending to document.body for overlay behavior.

5. SheetOverlay

• Type: React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>>

• Description: The semi-transparent backdrop overlay behind the Sheet that darkens the background and captures clicks to close the Sheet.

• Props:

  • className?: string — Additional CSS classes for customization.

  • All props supported by SheetPrimitive.Overlay.

• Behavior: Applies fixed positioning and fade/slide animations based on the Sheet's open/closed state.

• Example:

  <SheetOverlay className="custom-overlay" />
  

6. SheetContent

• Type: React.ForwardRefExoticComponent<SheetContentProps>

• Description: The main container for the Sheet’s content, which slides in from the specified side with animations.

• Props:

  • All props of SheetPrimitive.Content.

  • side?: 'top' | 'bottom' | 'left' | 'right' — Specifies from which side the sheet slides in. Default: 'right'.

  • className?: string — Additional CSS classes.

  • closeIcon?: boolean — Whether to display a close icon button in the top-right corner. Default: true.

• Features:

  • Wraps content inside SheetPortal and renders SheetOverlay.

  • Applies variant-based styling and transitions.

  • Automatically renders a close button with an accessible label if closeIcon is true.

• Example:

  <SheetContent side="left" closeIcon={false}>
    <p>Custom content here</p>
  </SheetContent>
  

7. SheetHeader

• Type: React.FC<React.HTMLAttributes<HTMLDivElement>>

• Description: A styled container for header content inside the Sheet, typically used for titles or introductory text.

• Styling: Vertical flex layout with spacing and responsive text alignment.

• Props: Accepts any standard div HTML attributes.

• Example:

  <SheetHeader>
    <SheetTitle>Settings</SheetTitle>
    <SheetDescription>Adjust your preferences</SheetDescription>
  </SheetHeader>
  

8. SheetFooter

• Type: React.FC<React.HTMLAttributes<HTMLDivElement>>

• Description: A styled container for footer content inside the Sheet, typically for action buttons.

• Styling: Responsive flex layout that reverses column order on small screens, aligns to the right on larger screens.

• Props: Accepts any standard div HTML attributes.

• Example:

  <SheetFooter>
    <button>Cancel</button>
    <button>Save</button>
  </SheetFooter>
  

9. SheetTitle

• Type: React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>>

• Description: Styled title element for the Sheet header.

• Styling: Large font size, semi-bold, foreground text color.

• Props: Accepts all props supported by SheetPrimitive.Title.

• Example:

  <SheetTitle>My Sheet Title</SheetTitle>
  

10. SheetDescription

• Type: React.ForwardRefExoticComponent<React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>>

• Description: Styled description text for the Sheet header or content area.

• Styling: Smaller font size, muted/secondary text color.

• Props: Accepts all props supported by SheetPrimitive.Description.

• Example:

  <SheetDescription>This sheet contains additional information.</SheetDescription>
  

Implementation Details

Styling and Variants

• Uses the cva function from class-variance-authority to define the sheetVariants constant.

• sheetVariants controls the animation, positioning, and sizing of the Sheet content based on the side prop:

  • top, bottom — full width, border on opposite side, slide animations vertically.

  • left, right — vertical full height, width constraints with max widths, slide animations horizontally.

• Animations use Radix UI's data-state attributes (open / closed) to trigger CSS transitions.

• The Sheet has a dark (inverted) background with shadows and rounded corners for a modern UI look.

Accessibility

• Built on Radix UI Dialog primitives which handle ARIA roles, focus management, keyboard navigation, and screen reader support.

• The close button includes a visually hidden label (<span className="sr-only">Close</span>) for screen readers.

Forwarding Refs

• Several components (e.g., SheetOverlay, SheetContent, SheetTitle, SheetDescription) use React.forwardRef to allow parent components to reference underlying DOM nodes or primitives.

Interaction with Other Parts of the System

• cn utility: Used to merge and conditionally apply CSS class names.

• @radix-ui/react-dialog: Provides the foundational accessible dialog behaviors.

• lucide-react: Supplies the X icon used for the close button.

• class-variance-authority: Enables styling variants for positioning and animations.

• Application: This Sheet component can be imported and used anywhere modal sliding panels are required. It integrates seamlessly with other UI components via its composable subcomponents.

Usage Example

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
} from './sheet';

function Example() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <button>Open Sheet</button>
      </SheetTrigger>
      <SheetContent side="left">
        <SheetHeader>
          <SheetTitle>Menu</SheetTitle>
          <SheetDescription>Select an option</SheetDescription>
        </SheetHeader>
        {/* Sheet body content */}
        <SheetFooter>
          <SheetClose asChild>
            <button>Close</button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

Mermaid Component Diagram

componentDiagram
    component SheetRoot as "Sheet (SheetPrimitive.Root)"
    component SheetTrigger as "SheetTrigger (SheetPrimitive.Trigger)"
    component SheetClose as "SheetClose (SheetPrimitive.Close)"
    component SheetPortal as "SheetPortal (SheetPrimitive.Portal)"
    component SheetOverlay as "SheetOverlay"
    component SheetContent as "SheetContent"
    component SheetHeader as "SheetHeader"
    component SheetFooter as "SheetFooter"
    component SheetTitle as "SheetTitle"
    component SheetDescription as "SheetDescription"
    component IconX as "X Icon (lucide-react)"

    SheetRoot <|-- SheetTrigger
    SheetRoot <|-- SheetPortal
    SheetPortal --> SheetOverlay
    SheetPortal --> SheetContent
    SheetContent --> SheetClose
    SheetClose --> IconX
    SheetContent --> SheetHeader
    SheetContent --> SheetFooter
    SheetHeader --> SheetTitle
    SheetHeader --> SheetDescription

Summary

The sheet.tsx file provides a fully-featured, accessible sliding panel ("Sheet") component built on Radix UI primitives with enhanced styling and flexibility. It exports a root Sheet component along with a set of composable subcomponents (SheetTrigger, SheetContent, SheetHeader, SheetFooter, etc.) that allow fine-grained control over the Sheet's structure and behavior. The component supports multiple slide-in directions, smooth animations, and includes an optional close icon for usability. It is designed for easy integration into React applications requiring side modal panels or drawers.