The app shell is defined in an `_app.tsx` file in the `routes/` folder. It typically contains the outer HTML structure of the document. The file must have a default export wrapped in the generated `app` helper. Only one such file is allowed per application. If you don't define one, Fresh uses a minimal default shell.
The component receives a `children` prop containing the rendered page (already wrapped in any [layouts](/docs/concepts/layouts)). Render `children` where the page body should appear.
```tsx routes/_app.tsx
import { app } from "./$_app.ts";
export default app(({ children }) => {
return (
My Fresh app
{children}
);
});
```
## Global stylesheets
Import your global CSS from the app shell so it ships as part of the document on first paint. Vite processes the file (bundling, Tailwind, etc.) and Fresh injects the resulting `` into every page.
```tsx routes/_app.tsx
import { app } from "./$_app.ts";
import "../style.css";
export default app(({ children }) => (
{children}
));
```
Static files placed in `public/` are served as-is from the root. For example, `public/logo.svg` becomes `/logo.svg`.
## Per-page title and meta
The app shell renders once per request and receives only `children`. It has no access to the current route's data, URL, or state. So per-page `` and `<meta>` tags don't belong here.
Instead, render them from a page or layout with [`<Head>`](/docs/advanced/head). It hoists its children into the document `<head>`.
```tsx routes/about.tsx
import { page } from "./$about.ts";
import { Head } from "fresh/runtime";
export default page(() => {
return (
<>
<Head>
<title>About — My Site
About
);
});
```
A good rule of thumb. Keep the static parts of the head (charset, viewport, font preloads, a theme `