Sheet

A raised panel for side content.

The panel only — it does not slide. Sheet is a rounded, shadowed surface: no edge animation, no overlay, no open state. Position and animate it yourself — see Docked to an edge.

Filters

Narrow down the results.

Usage

sheet-demo.tsx

import { Sheet } from 'trivela-ui';

export function Example() {
  return (
    <Sheet>
      <h2 className="font-semibold">Filters</h2>
      <p className="mt-1 text-sm text-slate-600">Narrow down the results.</p>
    </Sheet>
  );
}

Examples

Side panel content

Compose the header, body, and footer inside — Sheet only supplies the surface.

Filters

Status

Owner

Updated

Docked to an edge

Anchor it with positioning utilities to get the drawer look the name suggests.

Details

Docked to the right edge with absolute positioning.

API Reference

Prop	Type	Default	Description
variant	'solid' \| 'ghost' \| 'outline' \| 'subtle'	'outline'	Style variant for the component.
color	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'	'neutral'	Color scale used by the component.
className	string	—	Merged with the generated classes via cn().
...props	HTMLAttributes<HTMLDivElement>	—	All native attributes are forwarded to the root element.