Sheet

Overlays

A floating side or bottom panel with a rounded overlay surface.

Live preview

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import * as React from "react";
import { Button, Field, Input, Select, Sheet } from "@nphuonha/ui-kit";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<Sheet open={open} onOpenChange={setOpen} side="right" title="Filters">
  Content
</Sheet>

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
onOpenChange	(open: boolean) => void	—	Called when the sheet opens or closes.
trigger	ReactElement	—	Element that opens the sheet.
side	"right" \| "left" \| "bottom"	"right"	Panel edge.
title	ReactNode	—	Sheet title.
description	ReactNode	—	Supporting description.
footer	ReactNode	—	Actions rendered at the bottom.