Layouts

Required files

Layouts live in your project app/ folder. The CLI auto-detects these files:

app/expanded.tsx (required) — default layout for standard positions
app/featured.tsx (optional) — used for featured placement
app/featured-carousel.tsx (optional) — used when the featured layout is set to carousel
app/layout.tsx (optional) — wraps all other layouts
app/globals.css (recommended) — shared styles

linkapp dev, linkapp build, and linkapp deploy validate that app/expanded.tsx exists and will include other layouts when the files are present. Legacy projects using app/sheet.tsx continue to work, but new projects should rename to expanded.tsx.

Root layout wrapper (optional)

app/layout.tsx runs once and wraps whichever layout is displayed:

app/layout.tsx

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Expanded layout (required)

app/expanded.tsx

import type { AppProps } from "@linktr.ee/linkapp";

type Settings = { ctaText: string };

export default function Expanded({ linkUrl, theme, ctaText }: AppProps<Settings>) {
  return (
    <a
      href={linkUrl}
      style={{
        background: theme?.backgroundColor,
        color: theme?.textColor,
        borderRadius: theme?.borderRadius,
      }}
      className="button"
    >
      {ctaText}
    </a>
  );
}

Featured layout (optional)

app/featured.tsx

import type { AppProps } from "@linktr.ee/linkapp";

export default function Featured({ linkUrl, theme }: AppProps) {
  return (
    <section className="hero" style={{ background: theme?.backgroundColor }}>
      <a href={linkUrl} className="cta">
        View details
      </a>
    </section>
  );
}

Featured carousel (optional)

Provide app/featured-carousel.tsx to support carousel group layouts:

app/featured-carousel.tsx

import type { AppProps } from "@linktr.ee/linkapp";

export default function FeaturedCarousel({ linkUrl }: AppProps) {
  return <div className="carousel-card">Explore: {linkUrl}</div>;
}

When Linktree requests a featured carousel, the CLI serves featured-carousel.tsx if it exists; otherwise it falls back to featured.tsx.

Common props

All layouts receive:

Preview props you set in linkapp.config.ts (preview_props)
User settings defined in settings.elements
Linktree context such as linkUrl, theme, layout/__layout, and groupLayoutOption (used to select featured vs featured-carousel)

Type them with AppProps<YourSettings> to get autocomplete and type safety.

Next steps

Configuration

Define settings and preview props

Development

Run local preview and test layouts

Getting Started

Essentials

Required files

Root layout wrapper (optional)

Expanded layout (required)

Featured layout (optional)

Featured carousel (optional)

Common props

Next steps

Configuration

Development

​Required files

​Root layout wrapper (optional)

​Expanded layout (required)

​Featured layout (optional)

​Featured carousel (optional)

​Common props

​Next steps

Configuration

Development

Required files

Root layout wrapper (optional)

Expanded layout (required)

Featured layout (optional)

Featured carousel (optional)

Common props

Next steps