Sheet: HextaUI and shadcn/ui

The HextaUI Sheet keeps the shadcn/ui names and theme tokens and installs with the same CLI. This page lists what differs, read from the source of both. The shadcn/ui side is its base-vega registry as of 2026-10-16.

At a glance

Measure	HextaUI	shadcn/ui
Exported parts	12	8
Props the wrapper handles	5	2
Lines of source	330	140
npm dependencies	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`cn`
Built from	`buttontheme`	`button`

More source is not better on its own. Most of the extra lines in HextaUI handle states, motion and edge cases that you would otherwise write yourself.

Parts

Only in HextaUIDialogLayerProviderSheetPortalSheetOverlaySheetBody

In bothSheetSheetTriggerSheetCloseSheetContentSheetHeaderSheetFooterSheetTitleSheetDescription

Variants

Prop	In both	Only HextaUI	Only shadcn/ui
`side`SheetHandle	–	`toprightbottomleft`	–
`side`SheetHandleBar	–	`toprightbottomleft`	–

The HextaUI version

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

export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Edit profile
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Changes are saved to your account when you click save.
          </SheetDescription>
        </SheetHeader>
        <SheetBody>
          <div className="flex flex-col gap-4">
            <div className="flex flex-col gap-1.5">
              <label htmlFor="sheet-demo-name" className="text-sm font-medium">
                Name
              </label>
              <input
                id="sheet-demo-name"
                defaultValue="Olivia Martin"
                className="h-9 rounded-md border border-input bg-transparent px-3 text-sm transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden pointer-coarse:text-touch"
              />
            </div>
            <div className="flex flex-col gap-1.5">
              <label
                htmlFor="sheet-demo-username"
                className="text-sm font-medium"
              >
                Username
              </label>
              <input
                id="sheet-demo-username"
                defaultValue="@olivia"
                className="h-9 rounded-md border border-input bg-transparent px-3 text-sm transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden pointer-coarse:text-touch"
              />
            </div>
          </div>
        </SheetBody>
        <SheetFooter>
          <SheetClose render={<Button variant="outline" />}>Cancel</SheetClose>
          <SheetClose render={<Button />}>Save changes</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

Every state, the keyboard map and the API reference are on the component page.

7 of its examples also have a page of their own.

Switch one component

Run the add command with --overwrite to replace the shadcn/ui file in @/components/ui, then review the diff in git before you keep it. Imports stay the same, and components you don’t replace keep working.

pnpm dlx shadcn@latest add https://hextaui.com/r/sheet.json --overwrite

Every prop in the table above is an addition, so call sites written for shadcn/ui don’t pass it yet.
Check any part or variant listed only for shadcn/ui before you switch, and map it to the closest HextaUI one.