> ## 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. # Layouts > Learn how LinkApp layouts work and how to create them ## 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: ```tsx app/layout.tsx theme={"system"} export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` ## Expanded layout (required) ```tsx app/expanded.tsx theme={"system"} import type { AppProps } from "@linktr.ee/linkapp"; type Settings = { ctaText: string }; export default function Expanded({ linkUrl, theme, ctaText }: AppProps) { return ( {ctaText} ); } ``` ## Featured layout (optional) ```tsx app/featured.tsx theme={"system"} import type { AppProps } from "@linktr.ee/linkapp"; export default function Featured({ linkUrl, theme }: AppProps) { return (

View details

); } ``` ## Featured carousel (optional) Provide `app/featured-carousel.tsx` to support carousel group layouts: ```tsx app/featured-carousel.tsx theme={"system"} import type { AppProps } from "@linktr.ee/linkapp"; export default function FeaturedCarousel({ linkUrl }: AppProps) { return

Explore: {linkUrl}

; } ``` 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` to get autocomplete and type safety. ## Next steps Define settings and preview props Run local preview and test layouts