Overlays

Sheet

A modal panel that slides over the page, for details or filters that keep the list behind in view.

import { SheetContent, SheetHeader, SheetBody, SheetFooter, SheetTitle, SheetDescription } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Job details

Show code

sheet/job-details.tsx

'use client';

import {
  Button,
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  Text,
} from '@jsonresume/ui';

export default function SheetJobDetails() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>View job</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Senior Engineer</SheetTitle>
          <SheetDescription>Stripe · Remote · $180k–$220k</SheetDescription>
        </SheetHeader>
        <SheetBody>
          <Text>
            Build the payments platform used by millions of businesses.
            You&apos;ll own services end to end and work closely with product
            and design.
          </Text>
        </SheetBody>
        <SheetFooter>
          <SheetClose asChild>
            <Button variant="ghost">Close</Button>
          </SheetClose>
          <Button variant="primary">Apply</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

Sides

Show code

sheet/sides.tsx

'use client';

import {
  Button,
  Sheet,
  SheetBody,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@jsonresume/ui';

export default function SheetSides() {
  return (
    <>
      {(['left', 'right', 'bottom'] as const).map((side) => (
        <Sheet key={side}>
          <SheetTrigger asChild>
            <Button>{side}</Button>
          </SheetTrigger>
          <SheetContent side={side}>
            <SheetHeader>
              <SheetTitle>From the {side}</SheetTitle>
            </SheetHeader>
            <SheetBody>
              Use right for details, left for navigation, bottom for actions on
              small screens.
            </SheetBody>
          </SheetContent>
        </Sheet>
      ))}
    </>
  );
}