UI component
Page
Page is a layout shell for list and dashboard screens, giving you a predictable header area for search, filters, and primary actions.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { ButtonVariant, Page } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
Active only
Page content
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| children | Renders the main page content inside the layout shell. |
| actions | Adds primary page actions such as create, export, or sync. |
| enableSearch and onSearch | Turns on a search field and receives query updates from the header. |
| filterSlot | Lets you place chips, filters, or summaries next to the search field. |
| searchPlaceholder | Tailors the header copy to the page content being searched. |
Accessibility
Page composes the kit search and button components, so keyboard behavior and standard button semantics remain intact.
Integration notes
Use Page as a layout primitive, not as a state container. Search logic, filters, and action handlers should stay in your screen code.