Blocks

A block is a complete screen — a boarding pass, a wallet, an onboarding flow — composed from the components in this library. It is a starting point to copy and change, not a component to configure: it has no props beyond onBack and className, and its sample data sits at the top of the file.

Blocks are installed with the CLI and are not part of the npm package. Each one brings the components it is built from, so it works in a project that has none of them yet.

npx panelui-cli@latest add <block>

• Boarding Pass — A flight on one screen: the ticket, the time to boarding, the way to the gate, and a slide to check in.
• Wallet — A stack of cards with one in front, a balance that rolls when it changes, spending by week, month or year, and swipeable activity.
• Activity — Goal rings, body readings, steps and a workout streak, all switched between day, week and month.
• Smart Home — A room at a time: climate in one row, scenes that set the devices, and a tile per device that toggles when pressed.
• Onboarding — A first run in four steps: two screens on the app, one question, and a first plan made from the answer.