styple

Sheet

A modal overlaying a side of the page, rendering the content underneath inert.

Example

import { Sheet, SheetTrigger, SheetContent, SheetDescription, SheetClose } from "@styple/design-system";

<Sheet>
  <SheetTrigger asChild>
    <Button>Open sheet</Button>
  </SheetTrigger>
  <SheetContent
    headerTitle={<Heading as="h4">Example Heading</Heading>}
    footerContent={<SheetClose asChild><Button transparent variant="success" css={{ ml: "auto" }}>Close sheet</Button></SheetClose>}
  >
    <SheetDescription asChild>
      <Text css={{ lineHeight: "25px" }}>Here is some lorem ipsum example description text.</Text>
    </SheetDescription>
  </SheetContent>
</Sheet>

API Reference

See Radix-UI Dialog (v0.1.4) for details. This only covers styple abstractions.

Sheet

A styled component wrapper for Dialog.Root.

SheetContent

A styled abstraction combining Dialog.Portal, Dialog.Overlay and Dialog.Content. With custom props:

Prop	Type	Default	Explanation
`headerTitle`	`Heading`	-	Sheet title as a sticky `Dialog.Title` with `Dialog.Close`.
`footerContent?`	`ReactNode`	-	Bottom-fixed Sheet footer.

Others

Besides above the following component wrappers are exported: SheetTrigger, SheetClose, SheetDescription. See example and Radix docs for use-cases.

Separator

Sidebar