Sheet
A side panel sliding in from any edge — a thin re-export of Drawer under shadcn's naming.
Installation
npx kosmesis add sheetpnpm dlx kosmesis add sheetyarn dlx kosmesis add sheetbunx kosmesis add sheetThis component builds on other Kosmesis components — install these first (via kosmesis add or this same manual process on their own pages): drawer.
Copy and paste the following code into your project.
import { Drawer as Sheet, DrawerClose as SheetClose, DrawerContent as SheetContent, DrawerDescription as SheetDescription, DrawerFooter as SheetFooter, DrawerHeader as SheetHeader, DrawerTitle as SheetTitle, DrawerTrigger as SheetTrigger,} from "./drawer";/** * shadcn/ui's `Sheet` and `Drawer` both wrap the same underlying primitive (Radix `Dialog`), * differing only in the side they slide in from. Morphos's `Drawer` already has that `side` * prop, so Kosmesis's `Sheet` is a plain re-export — use `<Sheet>` directly, or import from * `./drawer` if you'd rather not have two names for the same component. */export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };Install the following dependencies:
npm install @praxisjs/csspnpm add @praxisjs/cssyarn add @praxisjs/cssbun add @praxisjs/cssThis component builds on other Kosmesis components — install these first (via kosmesis add or this same manual process on their own pages): drawer.
Copy and paste the following code into your project.
import { Drawer as Sheet, DrawerClose as SheetClose, DrawerContent as SheetContent, DrawerDescription as SheetDescription, DrawerFooter as SheetFooter, DrawerHeader as SheetHeader, DrawerTitle as SheetTitle, DrawerTrigger as SheetTrigger,} from "./drawer";/** * shadcn/ui's `Sheet` and `Drawer` both wrap the same underlying primitive (Radix `Dialog`), * differing only in the side they slide in from. Morphos's `Drawer` already has that `side` * prop, so Kosmesis's `Sheet` is a plain re-export — use `<Sheet>` directly, or import from * `./drawer` if you'd rather not have two names for the same component. */export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };Examples
Usage
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
@Component()
class Cart extends StatefulComponent {
@State() sheet = new Sheet({ side: "right" });
render() {
return (
<>
<SheetTrigger drawer={this.sheet}>Open cart</SheetTrigger>
<SheetContent drawer={this.sheet}>...</SheetContent>
</>
);
}
}shadcn/ui's Sheet and Drawer both wrap the same underlying Radix Dialog, differing only in
which side they slide from. Kosmesis mirrors that: Sheet is Drawer re-exported under a
different name — the props (including the part names like drawer=) are identical. See
Drawer for the full API.