Your First Customization
A safe order for turning the demo into your application without creating avoidable rework.
On this page 4
What you will learn
- Plan customization in the correct order.
- Keep changes easy to review.
- Reach a branded first page.
Prerequisites
- A passing original pnpm check
- A working local development server
Recommended order
Establish product-wide decisions before building business pages.
- Create a source-control baseline of the delivered package.
- Replace product name, metadata, logo, favicon, and brand assets.
- Set theme defaults and confirm both light and dark modes.
- Define the final sidebar structure in lib/navigation.ts.
- Create one real page using an existing dashboard page as a structural reference.
- Connect that page to one real API boundary.
- Remove unused demo routes only after the new navigation is stable.
Create a small first change
Change the dashboard heading and one navigation label first. This confirms routing, hot reload, and your understanding of the source map before a larger refactor.
text
Page content: app/app/dashboard/page.tsx
Navigation: lib/navigation.ts
Page styles: app/template.cssDefinition of done
A customization is complete only when it works across supported states.
- Desktop and mobile layouts are readable.
- Light and dark themes have sufficient contrast.
- Keyboard focus remains visible.
- The public route works with the configured base path.
- pnpm check succeeds.