Project structure

Your application code lives in src/. These are the main folders you will work with:

my-app/
  public/             # Images and other static files
  src/
    app/              # Pages and layouts
    components/       # Shared UI components
    configs/          # App settings and navigation
    actions/          # Functions that load page data
    mocks/            # Sample data
    styles/           # Global styles and theme tokens
    hooks/            # Shared React hooks
    types/            # Shared TypeScript types
    utils/            # Shared helper functions
  components.json     # NateUI CLI project configuration
  package.json        # Dependencies and project commands

Run project commands from the folder containing package.json. Keep components.json with your project; the NateUI CLI uses it to manage the components and demo pages you add.

Pages

Create pages under src/app/. Each page has a page.tsx file, and its folder determines the URL.

For example:

src/app/(protected-pages)/reports/page.tsx → /reports

Pages inside (protected-pages) use the app layout with navigation. The (auth-pages) group contains sign-in, sign-up and password-recovery screens. Names in parentheses organize pages under a layout and do not appear in the URL.

Keep components used by only one page beside that page, in its _components/ folder. Move a component into src/components/ when you need to share it across pages.

Shared components

Look in src/components/ before building a new UI element:

Folder	What belongs here
`ui/`	Controls such as buttons, inputs and dialogs
`composites/`	Larger controls assembled from UI components
`patterns/`	Reusable page sections
`layouts/`	The shared page frame and navigation

The files in src/configs/ control the app's settings and menu:

File	What you change here
`app.config.ts`	App name and default settings
`routes.config.ts`	Page settings and breadcrumbs
`navigation.config.ts`	Menu links and their order
`navigation-icon.config.tsx`	Icons used by menu items

When adding a page to the menu, use the same key in its route and navigation entries.

Keep the existing // nateui:... comments in these files. The CLI uses them when adding or removing demo pages.

Data

src/actions/ contains functions that load data for pages. The supplied examples read sample records from src/mocks/.

To connect a page to your own data, start with the function it uses in src/actions/ and replace the sample-data read. Keep the returned data in the shape the page expects, or update the page to match.

Some templates also include src/services/ for browser-side API requests.

Styles and assets

Edit src/styles/base.css to change theme colors and other design tokens. Global styles live in src/styles/.

Put images and other static assets in public/.