Game One

Sheet

Slide-over sheet primitive for drawers and panels.

Installation

npx shadcn@latest add @gameone/sheet

Registry dependencies: gameone-utils

Usage

Import
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
Example
<Sheet>
  <SheetTrigger asChild>
    <Button>Open</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Sheet Title</SheetTitle>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples

Right

Default side sheet for navigation drawers and inspector panels.

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function SheetRight() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Open right sheet</Button>
      </SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Right Sheet</SheetTitle>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

Left

Useful for app navigation and primary side panels.

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function SheetLeft() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Open left sheet</Button>
      </SheetTrigger>
      <SheetContent side="left">
        <SheetHeader>
          <SheetTitle>Left Sheet</SheetTitle>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

Top

Slides down from the top edge for stacked menus and announcement panels.

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function SheetTop() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Open top sheet</Button>
      </SheetTrigger>
      <SheetContent side="top">
        <SheetHeader>
          <SheetTitle>Top Sheet</SheetTitle>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

Bottom

Bottom sheet presentation for mobile-first actions and confirmation flows.

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function SheetBottom() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Open bottom sheet</Button>
      </SheetTrigger>
      <SheetContent side="bottom">
        <SheetHeader>
          <SheetTitle>Bottom Sheet</SheetTitle>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}
DialogPopover