Preview

Install

1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

   npx shadcn@latest add @txbrendan/theme

3. 3. Add the template. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.

   npx shadcn@latest add @txbrendan/landing-page

Props

• navbar

  The Navbar's props. It floats as a pill once the page scrolls, and folds into a menu below 42rem.

  NavbarProps

• hero

  The Hero's props: the claim, the lead, the call to action, logos, and the preview.

  HeroProps

• sections

  The sections under the hero, top to bottom. Each has an optional `id` and `headline`, and a `type` that says which part draws it.

  LandingSection[] · default []

• footer

  The Footer's props: the brand, a line about you, link columns, and the legal line.

  FooterProps

• renderLink

  Draws every link in the navbar, the bento cards, and the footer, unless a part sets its own.

  (props: NavbarLinkProps) => ReactNode · default a plain <a>

• embedded

  Renders the content in a div, not a main, for a preview inside another page.

  boolean · default false

• className

  Extra classes on the root, which holds the container query.

  string

• LandingSection

  Type. One section. Bento draws a BentoGrid of cards, comparison a Comparison, faq a FAQ, logos a Logo Marquee, testimonials a Testimonial Wall, and pricing a row of PricingCards, with an optional monthly or yearly switch.

  { id?: string; headline?: HeadlineProps } & ({ type: "bento"; cards: BentoCardProps[] } | { type: "comparison"; comparison: ComparisonProps } | { type: "faq"; faq: FaqProps } | { type: "logos"; logos: LogoMarqueeProps } | { type: "pricing"; plans: PricingCardProps[]; billing?: PricingBilling } | { type: "testimonials"; testimonials: TestimonialWallProps })

Accessibility

• The content sits in a main landmark, between the navbar's nav and the footer, so skip links and screen readers find it.
• The Hero renders the page's one h1. Each section's Headline is an h2.
• Sections with an `id` keep clear of the floating navbar when a link jumps to them.
• Each part keeps its own accessibility, listed on its page.

Examples

<LandingPage
  navbar={{
    brand: "Workspace",
    links: [{ href: "#features", label: "Features" }, { href: "#pricing", label: "Pricing" }],
    actions: <Button tone="brand" size="sm">Create a team</Button>,
  }}
  hero={{
    title: "The app your team",
    accent: "is missing.",
    description: "Plan the week, see who is coming, and keep everyone in one place.",
    actions: <Button tone="brand" size="lg">Create a team</Button>,
  }}
  sections={[
    {
      id: "features",
      type: "bento",
      headline: { title: "Everything in one place." },
      cards: [{ title: "Reminders", description: "Emails go to whoever hasn't answered." }],
    },
    {
      id: "pricing",
      type: "pricing",
      headline: { title: "One plan.", muted: "Every team." },
      plans: [{ title: "Team", price: "$12", period: "a month", action: <Button tone="brand">Start</Button> }],
    },
  ]}
  footer={{
    brand: "Workspace",
    columns: [{ title: "Product", links: [{ href: "#pricing", label: "Pricing" }] }],
    legal: "© 2026 Workspace",
  }}
/>