Sheet

Slide-over panel that slides in from the edge of the screen.

Installation

React

npx @galaxy-stack/nebula-cli add sheet

Vue

npx @galaxy-stack/nebula-cli add sheet

Angular

npx @galaxy-stack/nebula-cli add sheet

global

# If you have installed galaxy-design globally
galaxy-design add sheet

Usage

React

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

export default function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. 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" value="Pedro Duarte" className="col-span-3" />
          </div>
        </div>
      </SheetContent>
    </Sheet>
  )
}

Vue

<script setup lang="ts">
import { ref } from 'vue'
import { Sheet } from '@/components/sheet'
import { Button } from '@/components/button'

const open = ref(false)
</script>

<template>
  <Sheet v-model:open="open">
    <Button variant="outline" @click="open = true">Open</Button>
    <template #content>
      <div class="p-6">
        <h2 class="text-lg font-semibold">Edit profile</h2>
        <p class="text-sm text-muted-foreground">
          Make changes to your profile here.
        </p>
      </div>
    </template>
  </Sheet>
</template>

API Reference

Props

Prop	Type	Default	Description	Frameworks
open	boolean	undefined	Controlled open state	All
defaultOpen	boolean	false	Initial open state	All
onOpenChange	(open: boolean) => void	-	Called when open state changes	All
modal	boolean	true	Whether interaction outside is disabled	All
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

Subcomponents

SheetTrigger

Prop	Type	Default	Description	Frameworks
asChild	boolean	false	Render as child element	React, Vue, Angular
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

SheetContent

Prop	Type	Default	Description	Frameworks
side	'top' | 'bottom' | 'left' | 'right'	'right'	Side to slide in from	All
asChild	boolean	false	Render as child element	React, Vue, Angular
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

SheetHeader

Prop	Type	Default	Description	Frameworks
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

SheetTitle

Prop	Type	Default	Description	Frameworks
asChild	boolean	false	Render as child element	React, Vue, Angular
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

SheetDescription

Prop	Type	Default	Description	Frameworks
asChild	boolean	false	Render as child element	React, Vue, Angular
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

SheetFooter

Prop	Type	Default	Description	Frameworks
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

SheetClose

Prop	Type	Default	Description	Frameworks
asChild	boolean	false	Render as child element	React, Vue, Angular
className	string	''	CSS class names	React, React Native
class	string	''	CSS class names	Vue, Angular, Flutter

Examples

Different Sides

React

<Sheet>
  <SheetContent side="top">Content from top</SheetContent>
</Sheet>

<Sheet>
  <SheetContent side="left">Content from left</SheetContent>
</Sheet>

Accessibility

• Focus trap when open
• Escape key closes the sheet
• Backdrop click closes the sheet
• Proper ARIA labels

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)