Next.js
App Router with explicit server and client boundaries.
Install
Styles and fonts
Load once at the application root. White is the default; set data-theme="dark" for dark mode. Typography comes from the shared tokens.
Contract
- React component entrypoints retain use client in the published ESM. A Server Component can compose them; event handlers belong inside a Client Component.
- Import global styles and fonts in app/layout.tsx. Pass serializable data across the boundary and use native headings, paragraphs and links in slots.
- Slotted HTML renders on the server; Lit shadow roots and internal controls initialize in the browser. This is not Lit shadow-root SSR.
- The hosted notes app is a static export. Request-time SSR and hydration are tested separately with next build / next start using the same packages.
Try it
Open the React / Next.js notes example. Create, edit and delete notes stored only in this browser.
Try the Kanban board. Create tasks, move them between columns, and undo a move. Tasks are saved separately from notes.
Example
Scope
Import components individually. Charts and motion remain optional. See validation and limitations for the tested combinations.