Sheet

1<Sheet>2  <Sheet.Trigger>Open details</Sheet.Trigger>3  <Sheet.Content>4    <Sheet.Header>5      <Sheet.Title>Meeting details</Sheet.Title>6      <Sheet.Description>The page stays visible behind the panel.</Sheet.Description>7    </Sheet.Header>8    <Sheet.Body><p>Body scrolls independently.</p></Sheet.Body>9    <Sheet.Footer>10      <Sheet.Close variant="secondary">Cancel</Sheet.Close>11      <Sheet.Close variant="primary">Save</Sheet.Close>12    </Sheet.Footer>13  </Sheet.Content>14</Sheet>

1import { Sheet } from '@highlight/ui'2 3export default function SheetBasic() {4  return (5    <Sheet>6      <Sheet.Trigger>Open details</Sheet.Trigger>7      <Sheet.Content>8        <Sheet.Header>9          <Sheet.Title>Meeting details</Sheet.Title>10          <Sheet.Description>Slides in from the right; the page stays visible behind it.</Sheet.Description>11        </Sheet.Header>12        <Sheet.Body>13          <p className="text-foreground-secondary text-sm">14            Body scrolls independently when content is taller than the viewport.15          </p>16        </Sheet.Body>17        <Sheet.Footer>18          <Sheet.Close variant="outline">Cancel</Sheet.Close>19          <Sheet.Close variant="primary">Save</Sheet.Close>20        </Sheet.Footer>21      </Sheet.Content>22    </Sheet>23  )24}

1import { Sheet } from '@highlight/ui'2 3const SIDES = ['left', 'right', 'top', 'bottom'] as const4 5export default function SheetSides() {6  return (7    <div className="flex flex-wrap items-center justify-center gap-3">8      {SIDES.map((side) => (9        <Sheet key={side}>10          <Sheet.Trigger variant="outline" size="sm" className="capitalize">11            {side}12          </Sheet.Trigger>13          <Sheet.Content side={side}>14            <Sheet.Header>15              <Sheet.Title className="capitalize">{side}</Sheet.Title>16            </Sheet.Header>17            <Sheet.Body>18              <p className="text-foreground-secondary text-sm">19                Horizontal sheets are 600px wide; vertical ones are 300px tall.20              </p>21            </Sheet.Body>22          </Sheet.Content>23        </Sheet>24      ))}25    </div>26  )27}