Sheet

Preview

This preview uses documentation-only styling. Ship with one of the included recipe outputs (CSS, Tailwind, or UnoCSS) for production styles.

Side-panel dialog with slide animation.

#Usage

Compose Root, Trigger, Portal, Backdrop, Content, Title, Description, Close.

import * as Sheet from "@solidiom/sheet"

;<Sheet.Root>Sheet content</Sheet.Root>

#Installation

Install the package with pnpm add @solidiom/sheet. The package requires compatible solid-js and @solidjs/web peer dependencies.

#Parts

Sheet exposes 8 parts:

• Root — data-part="root".
• Trigger — data-part="trigger".
• Portal — data-part="portal".
• Backdrop — data-part="backdrop".
• Content — data-part="content".
• Title — data-part="title".
• Description — data-part="description".
• Close — data-part="close".

#Styling

Sheet carries data-scope="sheet" and data-part attributes on each part for CSS/recipe targeting. State attributes like data-state, data-disabled, and data-highlighted are exposed where applicable.

#Keyboard & behavior

#Composition

Sheet is designed to compose with other primitives. Its parts can be combined with Field, Button, or other primitives as needed.

#SSR and hydration

Sheet renders as semantic HTML during server rendering. Interactive behavior (keyboard handlers, state management) activates on hydration without layout shift.

solidiom add sheet