Skip to main content

​
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>
  );
}
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>
  );
}
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