---
index: 2
---

# Guidelines

## `@sd/interface`

Most interface code should live inside the `app` directory,
with the folder structure resembling the app's routing structure.
We currently use [React Router](https://reactrouter.com/) and take full advantage of nested and config-based routing

### Casing

- All files/folders containing a route should be `lower-kebab-case`
- Dynamic routes should be `camelCase` and have their parameter name prefixed with `$`
- All other files/folders should be `PascalCase` (expect for `index` files inside `PascalCase` folders)

### Layouts

If a folder of routes has a component that should be applied to _every_ sub-route,
the component's file should be named `Layout.tsx` and applied in the parent folder's routing configuration as the `element` property.

For components that should wrap a subset of routes,
name the file with something ending in `Layout.tsx` (but not `Layout.tsx` itself!).
We then recommend using [layout routes](https://reactrouter.com/en/main/route/route#layout-routes) to apply the layout without introducing a new `path` segment.