Skip to Content
Dashflow Logo

Sheet Component

A comprehensive guide to using the Sheet component with examples, props, and best practices.

Overview

The Sheet component provides a slide-out panel interface that appears from the side of the screen. It's designed for forms, settings, and additional content that needs to be accessible without navigating away from the current page.

Basic Usage

The Sheet component is directly re-exported from @dashflowx/core. It provides a slide-out panel interface with trigger, content, header, and footer components.

import { 
  Sheet, 
  SheetTrigger, 
  SheetContent, 
  SheetHeader, 
  SheetTitle, 
  SheetDescription, 
  SheetFooter 
} from '@/components/sheet'


export default function SheetExample() {
  return (
    <Sheet>
      <SheetTrigger>Open Sheet</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you're done.
          </SheetDescription>
        </SheetHeader>
        <div className="py-4">
          <p>Sheet content goes here...</p>
        </div>
        <SheetFooter>
          <button>Save changes</button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

Preview:

Loading Button...

Sheet with Background Color

import { Sheet, SheetWrapper } from '@/components/sheet'


export default function SheetWithBg() {
  return (
    <SheetWrapper bgColor="blue" bgIntensity="100">
      <Sheet>
        <SheetTrigger>Open Blue Sheet</SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Blue Sheet</SheetTitle>
            <SheetDescription>
              This sheet has a blue background.
            </SheetDescription>
          </SheetHeader>
        </SheetContent>
      </Sheet>
    </SheetWrapper>
  )
}

Preview:

Loading Button...

Props

The Sheet component is directly re-exported from @dashflowx/core, so it uses the same props as the core component. Additionally, we provide a SheetWrapper component for background color customization.

SheetWrapper Props

PropTypeDefaultDescription
bgColorSheetBgColor'white'Background color variant
bgIntensitySheetBgIntensity'50'Background color intensity (50-950)
classNamestring-Additional CSS classes
childrenReact.ReactNode-Sheet components to wrap

Core Sheet Props

The core Sheet component from @dashflowx/core supports standard sheet props like open, onOpenChange, side, etc. Refer to the @dashflowx/core documentation for complete prop details.

Background Color Types

type SheetBgColor = 
  | 'white' 
  | 'gray' 
  | 'slate' 
  | 'zinc' 
  | 'neutral' 
  | 'stone' 
  | 'red' 
  | 'orange' 
  | 'amber' 
  | 'yellow' 
  | 'lime' 
  | 'green' 
  | 'emerald' 
  | 'teal' 
  | 'cyan' 
  | 'sky' 
  | 'blue' 
  | 'indigo' 
  | 'violet' 
  | 'purple' 
  | 'fuchsia' 
  | 'pink' 
  | 'rose'
  | 'transparent'
  | 'glass'
  | 'gradient';


type SheetBgIntensity = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950';

Background Color Examples

Basic Background Colors

// White background (default)
<Sheet bgColor="white" bgIntensity="50" />


// Gray background
<Sheet bgColor="gray" bgIntensity="100" />


// Blue background
<Sheet bgColor="blue" bgIntensity="200" />

Special Background Effects

// Glass effect
<Sheet bgColor="glass" />


// Gradient background
<Sheet bgColor="gradient" />


// Transparent background
<Sheet bgColor="transparent" />

Preview:

Loading Button...

Preview:

Loading Button...

Preview:

Loading Button...

Components

Sheet

The main sheet container component.

SheetTrigger

Trigger button to open the sheet.

SheetContent

Content container for the sheet.

SheetHeader

Header section of the sheet.

SheetTitle

Title of the sheet.

SheetDescription

Description text for the sheet.

SheetFooter

Footer section of the sheet.

SheetClose

Close button for the sheet.

SheetOverlay

Overlay background for the sheet.

SheetPortal

Portal for rendering the sheet.

Examples

Basic Sheet with Components

import { 
  Sheet, 
  SheetTrigger, 
  SheetContent, 
  SheetHeader, 
  SheetTitle, 
  SheetDescription 
} from '@/components/sheet'


export default function BasicSheet() {
  return (
    <Sheet>
      <SheetTrigger>Open Sheet</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Basic Sheet</SheetTitle>
          <SheetDescription>
            This is a basic sheet example.
          </SheetDescription>
        </SheetHeader>
        <div className="py-4">
          <p>Your content goes here...</p>
        </div>
      </SheetContent>
    </Sheet>
  )
}

Preview:

Loading Button...

Sheet with Different Sides

import { Sheet, SheetContent, SheetTrigger } from '@/components/sheet'


export default function LeftSideSheet() {
  return (
    <Sheet>
      <SheetTrigger>Open Left Sheet</SheetTrigger>
      <SheetContent side="left">
        <div className="py-4">
          <h3 className="text-lg font-semibold">Left Side Sheet</h3>
          <p>This sheet opens from the left side.</p>
        </div>
      </SheetContent>
    </Sheet>
  )
}

Preview:

Loading Button...

Sheet with Custom Content

import { 
  Sheet, 
  SheetTrigger, 
  SheetContent, 
  SheetHeader, 
  SheetTitle,
  SheetFooter 
} from '@/components/sheet'


export default function CustomContentSheet() {
  return (
    <Sheet>
      <SheetTrigger>Open Custom Sheet</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Custom Content</SheetTitle>
        </SheetHeader>
        <div className="py-4 space-y-4">
          <h3 className="text-lg font-semibold">Custom Content</h3>
          <p>This is custom content inside the sheet.</p>
          <div className="flex gap-2">
            <button className="px-4 py-2 bg-blue-500 text-white rounded">Action 1</button>
            <button className="px-4 py-2 bg-gray-500 text-white rounded">Action 2</button>
          </div>
        </div>
        <SheetFooter>
          <button className="px-4 py-2 bg-green-500 text-white rounded">Save</button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

Preview:

Loading Button...

Common Use Cases

Profile Edit Form

import { 
  Sheet, 
  SheetTrigger, 
  SheetContent, 
  SheetHeader, 
  SheetTitle, 
  SheetDescription,
  SheetFooter 
} from '@/components/sheet'


const ProfileEditForm = () => (
  <Sheet>
    <SheetTrigger>Edit Profile</SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Edit Profile</SheetTitle>
        <SheetDescription>
          Make changes to your profile here. Click save when you're done.
        </SheetDescription>
      </SheetHeader>
      <div className="py-4 space-y-4">
        <div>
          <label className="block text-sm font-medium">Name</label>
          <input className="w-full p-2 border rounded" placeholder="Your name" />
        </div>
        <div>
          <label className="block text-sm font-medium">Email</label>
          <input className="w-full p-2 border rounded" placeholder="your@email.com" />
        </div>
      </div>
      <SheetFooter>
        <button className="px-4 py-2 bg-blue-500 text-white rounded">Save changes</button>
      </SheetFooter>
    </SheetContent>
  </Sheet>
);

Settings Panel

import { 
  Sheet, 
  SheetTrigger, 
  SheetContent, 
  SheetHeader, 
  SheetTitle 
} from '@/components/sheet'


const SettingsPanel = () => (
  <Sheet>
    <SheetTrigger>Settings</SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Settings</SheetTitle>
      </SheetHeader>
      <div className="py-4 space-y-4">
        <div className="flex items-center justify-between">
          <span>Dark Mode</span>
          <input type="checkbox" />
        </div>
        <div className="flex items-center justify-between">
          <span>Notifications</span>
          <input type="checkbox" defaultChecked />
        </div>
      </div>
    </SheetContent>
  </Sheet>
);

Quick Actions

import { 
  Sheet, 
  SheetTrigger, 
  SheetContent, 
  SheetHeader, 
  SheetTitle 
} from '@/components/sheet'


const QuickActions = () => (
  <Sheet>
    <SheetTrigger>Quick Actions</SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Quick Actions</SheetTitle>
      </SheetHeader>
      <div className="py-4 space-y-2">
        <button className="w-full p-3 text-left border rounded hover:bg-gray-50">
          Create New Project
        </button>
        <button className="w-full p-3 text-left border rounded hover:bg-gray-50">
          Import Data
        </button>
        <button className="w-full p-3 text-left border rounded hover:bg-gray-50">
          Export Report
        </button>
      </div>
    </SheetContent>
  </Sheet>
);

Additional Information

import { 
  Sheet, 
  SheetTrigger, 
  SheetContent, 
  SheetHeader, 
  SheetTitle, 
  SheetDescription 
} from '@/components/sheet'


const AdditionalInfo = () => (
  <Sheet>
    <SheetTrigger>More Info</SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Additional Information</SheetTitle>
        <SheetDescription>
          Learn more about this feature.
        </SheetDescription>
      </SheetHeader>
      <div className="py-4">
        <p className="text-sm text-gray-600">
          This is additional information that provides more context
          about the current feature or action.
        </p>
      </div>
    </SheetContent>
  </Sheet>
);

Best Practices

1. Clear Purpose

Make the sheet's purpose clear to users.

// ✅ Good - Clear purpose
<SheetTitle>Edit Profile</SheetTitle>


// ❌ Avoid - Unclear purpose
<SheetTitle>Panel</SheetTitle>

2. Appropriate Size

Set appropriate size for the sheet content.

// ✅ Good - Appropriate size
<SheetContent className="w-96" />


// ❌ Avoid - Too wide or too narrow
<SheetContent className="w-screen" />

3. Consistent Styling

Maintain consistent styling across sheets.

// ✅ Good - Consistent styling
<SheetWrapper bgColor="gray" bgIntensity="50">
  <Sheet>...</Sheet>
</SheetWrapper>


// ❌ Avoid - Inconsistent styling
<SheetWrapper bgColor="random" />

4. Accessible Navigation

Ensure sheet navigation is accessible to all users.

// ✅ Good - Accessible
<Sheet>
  <SheetTrigger>Open Sheet</SheetTrigger>
  <SheetContent>...</SheetContent>
</Sheet>


// ❌ Avoid - Not accessible
<div>Sheet content</div>

5. Proper Structure

Use proper component structure for better organization.

// ✅ Good - Proper structure
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
      <SheetDescription>Description</SheetDescription>
    </SheetHeader>
    <div>Content</div>
    <SheetFooter>Actions</SheetFooter>
  </SheetContent>
</Sheet>

Customization

Background Colors

You can customize the sheet background using the SheetWrapper component:

// Blue background
<SheetWrapper bgColor="blue" bgIntensity="100">
  <Sheet>...</Sheet>
</SheetWrapper>


// Glass effect
<SheetWrapper bgColor="glass">
  <Sheet>...</Sheet>
</SheetWrapper>


// Gradient background
<SheetWrapper bgColor="gradient">
  <Sheet>...</Sheet>
</SheetWrapper>

Custom Styling

You can customize the sheet appearance using CSS classes:

<SheetWrapper className="border border-gray-300 rounded-lg p-4">
  <Sheet>...</Sheet>
</SheetWrapper>

Different Themes

Use different themes for different contexts:

// Light theme
<SheetWrapper bgColor="white" bgIntensity="50">
  <Sheet>...</Sheet>
</SheetWrapper>


// Dark theme
<SheetWrapper bgColor="gray" bgIntensity="900">
  <Sheet>...</Sheet>
</SheetWrapper>


// Brand theme
<SheetWrapper bgColor="blue" bgIntensity="100">
  <Sheet>...</Sheet>
</SheetWrapper>

Size Variations

Use different sizes for different emphasis levels:

// Small sheet
<SheetContent className="w-64">...</SheetContent>


// Standard sheet
<SheetContent className="w-96">...</SheetContent>


// Large sheet
<SheetContent className="w-[32rem]">...</SheetContent>

Advanced Usage

Dynamic Sheet Content

Load sheet content dynamically:

import { useState, useEffect } from 'react';
import { Sheet, SheetContent, SheetTrigger, SheetHeader, SheetTitle } from '@/components/sheet';


const DynamicSheet = () => {
  const [content, setContent] = useState(null);


  useEffect(() => {
    // Load content based on user action
    loadSheetContent().then(setContent);
  }, []);


  return (
    <Sheet>
      <SheetTrigger>Load Content</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Dynamic Content</SheetTitle>
        </SheetHeader>
        <div className="py-4">
          {content ? <div>{content}</div> : <div>Loading...</div>}
        </div>
      </SheetContent>
    </Sheet>
  );
};

Conditional Sheet Content

Show different content based on conditions:

import { Sheet, SheetContent, SheetTrigger } from '@/components/sheet';


const ConditionalSheet = ({ userRole }) => {
  const getContent = () => {
    if (userRole === 'admin') {
      return <AdminContent />;
    }
    return <UserContent />;
  };


  return (
    <Sheet>
      <SheetTrigger>Open</SheetTrigger>
      <SheetContent>
        {getContent()}
      </SheetContent>
    </Sheet>
  );
};

Sheet State Management

Handle sheet state:

import { useState } from 'react';
import { Sheet, SheetContent, SheetTrigger } from '@/components/sheet';


const StatefulSheet = () => {
  const [isOpen, setIsOpen] = useState(false);


  return (
    <Sheet open={isOpen} onOpenChange={setIsOpen}>
      <SheetTrigger>Open</SheetTrigger>
      <SheetContent>
        <div className="py-4">
          <p>Sheet is {isOpen ? 'open' : 'closed'}</p>
          <button onClick={() => setIsOpen(false)}>Close</button>
        </div>
      </SheetContent>
    </Sheet>
  );
};
  • Dialog: For modal dialogs
  • Drawer: For drawer interfaces
  • Popover: For popover content
  • Form: For form content
  • Button: For sheet triggers

API Reference

For the complete API reference and advanced usage patterns, see the Sheet API documentation.

Edit this page on GitHub
previousSeparator