Find your way around

Follow a feature from its route to its data and shared components. You rarely need to understand the whole demo before adapting one page.

Application entry points

• src/main.tsx mounts React, wraps the application in BrowserRouter, and imports root SCSS and icon styles
• src/App.tsx registers routes, selects the shared layout, and installs the preferences provider and toast renderer
• src/application/ contains theme preferences and application-level notification setup

Start in App.tsx when you know the browser path but not the source file. Several larger examples are lazy-loaded through React's lazy and Suspense.

Pages and reusable UI

src/routes/ holds page-level code under dashboards, apps, pages, and components. The Components routes are live usage examples; they are different from the reusable implementations in src/components/.

For example, src/routes/components/ui/DataTables.tsx demonstrates tables, while src/components/data-table/DataTable.tsx renders the reusable table presentation. Copying a showroom page wholesale can bring in demonstration controls your product does not need.

Shared layouts are in src/components/layout/. Navigation configuration and renderers are in src/components/navigation/. Generic page headings live in src/components/page/PageHeader.tsx.

Feature data

Look beside the page for its data file:

• Projects: src/routes/apps/projects/projects.data.ts
• File Manager: src/routes/apps/files/files.data.ts
• Calendar: src/routes/apps/calendar/calendar.data.ts
• Chat: src/routes/apps/chat/chat.data.ts

These files contain typed fixtures and, in some cases, cloning or lookup helpers. Related demo pages can share initial records while keeping edits local to the current page. Shared fixtures are not a shared database.

Styles and static assets

src/assets/scss/root.scss loads Bootstrap, base styles, components, pages, and library compatibility styles. Start brand changes in settings/_semantic.scss; use base/_theme.scss for existing runtime theme values.

Assets in public/ can be referenced by URL. Some demo fixtures use root-relative image URLs, which need attention if you deploy below a subdirectory. See Build and deployment.

Tests and detailed references

Tests live in top-level tests/, generally mirroring src/. For example, the Calendar utilities and page have tests under tests/routes/apps/calendar/.

The source's docs/components/ directory contains detailed integration notes. Use the guide matching a component alongside its TSX implementation when you need exact props or ownership boundaries.

A useful editing sequence

1. Find the route in App.tsx
2. Open its page and follow local data imports
3. Identify which pieces are shared UI and which are example-specific
4. Make the smallest useful change and add or update the matching tests
5. Run the checks before expanding the change