Sheet

A floating 20px-radius side panel inset from the edge, with a round close button, pill actions and the 500ms iOS curve.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Button } from '@/components/ui/button';
2import { SheetRounded } from '@/components/component-kit/items/sheet-rounded';
3
4export function Example() {
5  return (
6    <SheetRounded
7      trigger={<Button variant="outline">Open settings</Button>}
8      title="Workspace settings"
9      description="Changes apply to everyone in the workspace."
10    >
11      <p className="text-sm">Your content here.</p>
12    </SheetRounded>
13  );
14}

Props

Sheet properties
Prop	Type	Default	Description
`trigger`	`ReactElement`	`—`	Element that opens the sheet.
`side`	`"right" \| "left" \| "bottom"`	`right`	Edge the panel slides from.
`footer`	`ReactNode`	`Done button`	Custom footer actions.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Button } from '@/components/ui/button';
2import { SheetRounded } from '@/components/component-kit/items/sheet-rounded';
3
4export function Example() {
5  return (
6    <SheetRounded
7      trigger={<Button variant="outline">Open settings</Button>}
8      title="Workspace settings"
9      description="Changes apply to everyone in the workspace."
10    >
11      <p className="text-sm">Your content here.</p>
12    </SheetRounded>
13  );
14}

Prop

Type

Default

Description

trigger

ReactElement

—

Element that opens the sheet.

side

"right" | "left" | "bottom"

right

Edge the panel slides from.

footer

ReactNode

Done button

Custom footer actions.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Button } from '@/components/ui/button';
2import { SheetRounded } from '@/components/component-kit/items/sheet-rounded';
3
4export function Example() {
5  return (
6    <SheetRounded
7      trigger={<Button variant="outline">Open settings</Button>}
8      title="Workspace settings"
9      description="Changes apply to everyone in the workspace."
10    >
11      <p className="text-sm">Your content here.</p>
12    </SheetRounded>
13  );
14}

Prop

Type

Default

Description

trigger

ReactElement

—

Element that opens the sheet.

side

"right" | "left" | "bottom"

right

Edge the panel slides from.

footer

ReactNode

Done button

Custom footer actions.

Sheet

A floating 20px-radius side panel inset from the edge, with a round close button, pill actions and the 500ms iOS curve.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { Button } from '@/components/ui/button';
2import { SheetRounded } from '@/components/component-kit/items/sheet-rounded';
3
4export function Example() {
5  return (
6    <SheetRounded
7      trigger={<Button variant="outline">Open settings</Button>}
8      title="Workspace settings"
9      description="Changes apply to everyone in the workspace."
10    >
11      <p className="text-sm">Your content here.</p>
12    </SheetRounded>
13  );
14}

Props

Sheet properties
Prop	Type	Default	Description
`trigger`	`ReactElement`	`—`	Element that opens the sheet.
`side`	`"right" \| "left" \| "bottom"`	`right`	Edge the panel slides from.
`footer`	`ReactNode`	`Done button`	Custom footer actions.