> ## Documentation Index
> Fetch the complete documentation index at: https://docs.linktr.ee/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration

> Configure your LinkApp with linkapp.config.ts

## File location

Place `linkapp.config.ts` in your project root or `.config/linkapp.config.ts`. The CLI loads either path for `linkapp dev`, `linkapp build`, and `linkapp deploy`.

## Shape at a glance

```ts linkapp.config.ts theme={"system"}
import type { LinkAppConfig } from "@linktr.ee/linkapp/types";

export default {
  manifest: {
    name: "My LinkApp",          // -> ID: my-linkapp (cannot change after first deploy)
    tagline: "Do more with Linktree",
    description: ["Short summary"],
    manifest_version: "1.0.0",
    version: "0.1.0",
    category: "share",
    search_terms: ["demo"],
    supporting_links: {
      terms_of_service: "https://example.com/terms",
      privacy_policy: "https://example.com/privacy",
    },
    author: {
      name: "You",
      accounts: ["your-linktree"],
      contact: { url: "https://linktr.ee/you", email: "hi@example.com" },
    },
  },
  settings: {
    title: "My LinkApp",
    overview: { description: "Configure your app" },
    elements: [
      { id: "ctaText", inputType: "text", label: "CTA text", defaultValue: "Click me" },
    ],
  },
  url_match_rules: {
    hostnames: ["example.com"],
    patterns: [{ pathname: "/:slug" }],
  },
  preview_props: {
    __linkUrl: "https://example.com",
    ctaText: "Preview CTA",
  },
} satisfies LinkAppConfig;
```

Top-level fields use `snake_case` to match the Linktree API; element properties use `camelCase`.

## Key points

* **LinkApp ID**: derived from `manifest.name` on first deploy and remains fixed. Choose carefully before shipping.
* **Settings → props**: every element in `settings.elements` becomes a prop in your layouts. Type them with `AppProps<YourSettings>`:
  ```tsx app/expanded.tsx theme={"system"}
  import type { AppProps } from "@linktr.ee/linkapp";
  type Settings = { ctaText: string };
  export default function Sheet(props: AppProps<Settings>) {
    return <button>{props.ctaText}</button>;
  }
  ```
* **Preview props**: values under `preview_props` are injected during `linkapp dev` so you can see realistic data without publishing.
* **URL match rules**: optional. Provide `hostnames` and `patterns` so Linktree can suggest your LinkApp when users paste matching URLs.

## Validation

Configuration is validated during `linkapp build` and `linkapp deploy`. Fix reported errors (missing required fields, invalid patterns, etc.) before retrying.

## Next steps

<CardGroup cols={2}>
  <Card title="Manifest reference" icon="book" href="/essentials/configuration/manifest">
    All manifest fields
  </Card>

  <Card title="Settings reference" icon="sliders" href="/essentials/settings-reference">
    Build your settings UI
  </Card>
</CardGroup>