# Sheet

shadcn's sheet (Radix dialog from an edge) in Candor's theme.

- Registry name: `sheet` (`@candor/sheet`)
- Tier: Pro. Installing it needs a Pro, Premium or Team licence key: the person runs `npx candor-ui key <key>` themselves; never ask for the key in chat or write it to a file.
- Docs: https://candor.themethodic.com/docs/sheet

## Install

```bash
npx candor-ui add sheet
```

Run `npx candor-ui@latest init` once first (https://candor.themethodic.com/get-started.md). Without the CLI: `npx shadcn@latest add @candor/sheet`.
It brings in: locale, render-prop, utils.
npm packages: lucide-react@^1.67.0, radix-ui@^1.8.1.

## Example

```tsx
"use client"

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

export default function Example() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Flag details</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>checkout.new_tax_engine</SheetTitle>
          <SheetDescription>On for 10% of Production traffic since Tuesday. Owned by the payments team.</SheetDescription>
        </SheetHeader>
        <div className="px-4 text-sm text-muted-foreground">Read by the checkout API and the invoice worker. No errors in the last 24 hours.</div>
        <SheetFooter>
          <SheetClose asChild>
            <Button variant="outline">Close</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

## <Sheet>

No props.

Also takes the props of `React.ComponentProps<typeof SheetPrimitive.Root>`.

## <SheetTrigger>

No props.

Also takes the props of `React.ComponentProps<typeof SheetPrimitive.Trigger>`, `RenderProp`.

## <SheetClose>

No props.

Also takes the props of `React.ComponentProps<typeof SheetPrimitive.Close>`, `RenderProp`.

## <SheetContent>

Props:

- `side?: "top" | "right" | "bottom" | "left" | undefined` (default `"right"`): The edge the sheet slides in from. Defaults to right.
- `showCloseButton?: boolean | undefined` (default `true`): Shows the close (×) button. Defaults to true.

Also takes the props of `React.ComponentProps<typeof SheetPrimitive.Content>`.

## <SheetHeader>

No props.

Also takes the props of `React.ComponentProps<"div">`.

## <SheetFooter>

No props.

Also takes the props of `React.ComponentProps<"div">`.

## <SheetTitle>

No props.

Also takes the props of `React.ComponentProps<typeof SheetPrimitive.Title>`.

## <SheetDescription>

No props.

Also takes the props of `React.ComponentProps<typeof SheetPrimitive.Description>`.

## Strings (`sheet`)

The fixed words, English by default. Override any of them under `sheet` in `<LocaleProvider strings={{ sheet: { … } }}>`; the table is exported as `sheetStrings`.

- `close`: Close

## Rules for using Candor UI

- Components take plain typed data. Never pass model output as HTML or render it as a link; messages are typed blocks.
- A control that can't be used says why: wrap it in `<Locked reason="…">`, don't just disable it.
- Don't show a value you don't have: leave it out (it renders as —) rather than guess. An estimate is labelled as one.
- Nothing is pre-selected in a decision a person makes, and the agent is named from your app's data, never from model output.
- Your app's words go in `LocaleProvider` (fixed strings) and `TermsProvider` (nouns); entity kinds and agent roles in `EntityKindsProvider` and `AgentRolesProvider`.