Guides
Build a Landing Page
A step-by-step tutorial to build a complete, production-ready landing page using trink-ui section components. By the end, you will have a fully styled page with a navbar, hero, features, pricing, testimonials, FAQ, CTA, and footer.
1Project setup
Start with a fresh Next.js project and install trink-ui. If you already have a project, skip to step 2.
Terminal
npx create-next-app@latest my-landing --typescript --tailwind --app
cd my-landing
npm install @trinkui/reactnext.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
transpilePackages: ["@trinkui/react", "@trinkui/shared"],
};
export default nextConfig;Then add the CSS variables and @source directive to your globals.css as described in the Next.js Setup guide.
2Add the Navbar
Every landing page needs navigation. Use NavbarSimple for a clean, responsive navbar that collapses into a hamburger menu on mobile:
app/page.tsx — Navbar
import { NavbarSimple } from "@trinkui/react";
// Inside your page component:
<NavbarSimple
brand={{ name: "Acme", href: "/" }}
links={[
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "FAQ", href: "#faq" },
]}
actions={[
{ label: "Sign In", href: "/login", variant: "ghost" },
{ label: "Get Started", href: "/signup", variant: "primary" },
]}
/>3Hero section
The hero is the first thing visitors see. Use HeroCentered for a classic centered layout with a headline, subtitle, and call-to-action buttons:
<HeroCentered
badge="Now in beta"
title="Ship your landing page in minutes, not weeks"
subtitle="trink-ui gives you production-ready sections that snap together like building blocks. Focus on your message, not your markup."
primaryAction={{ label: "Start Building", href: "/signup" }}
secondaryAction={{ label: "View Components", href: "/components" }}
/>4Features section
Showcase your product's key benefits with FeaturesGrid. It renders a responsive 3-column grid that stacks on mobile:
<FeaturesGrid
id="features"
title="Everything you need to launch"
subtitle="Built by developers, for developers."
features={[
{
icon: "lightning",
title: "Fast by default",
description: "Optimized rendering with zero layout shift. Tree-shakeable imports keep your bundle lean.",
},
{
icon: "palette",
title: "Fully customizable",
description: "CSS variables for colors, fonts, and spacing. Override anything without ejecting.",
},
{
icon: "shield",
title: "Accessible",
description: "Semantic HTML, keyboard navigation, and screen reader support out of the box.",
},
{
icon: "code",
title: "TypeScript first",
description: "Full type safety with documented props. Autocomplete in your editor.",
},
{
icon: "layers",
title: "Composable sections",
description: "Mix and match hero, features, pricing, and more to build any landing page.",
},
{
icon: "moon",
title: "Dark mode ready",
description: "Every section supports light and dark themes with a single prop.",
},
]}
/>5Pricing section
Use PricingCards to display your pricing tiers. Set highlighted: true on the recommended plan:
<PricingCards
id="pricing"
title="Simple, transparent pricing"
subtitle="No hidden fees. Cancel anytime."
plans={[
{
name: "Starter",
price: "$0",
period: "forever",
description: "For side projects and experimentation.",
features: ["3 projects", "Community support", "Basic analytics"],
action: { label: "Get Started", href: "/signup" },
},
{
name: "Pro",
price: "$29",
period: "/month",
description: "For growing teams that need more.",
features: ["Unlimited projects", "Priority support", "Advanced analytics", "Custom domain"],
action: { label: "Start Free Trial", href: "/signup?plan=pro" },
highlighted: true,
},
{
name: "Enterprise",
price: "Custom",
description: "For organizations with specific needs.",
features: ["Everything in Pro", "SSO & SAML", "Dedicated account manager", "SLA guarantee"],
action: { label: "Contact Sales", href: "/contact" },
},
]}
/>6Testimonials section
Social proof increases conversions. Use TestimonialsGrid to display customer quotes in a responsive grid:
<TestimonialsGrid
theme="dark"
title="Loved by developers"
testimonials={[
{
quote: "trink-ui cut our landing page development time from 2 weeks to 2 days.",
author: "Sarah Chen",
role: "CTO at LaunchPad",
avatar: "/avatars/sarah.jpg",
},
{
quote: "The components are beautifully designed and incredibly easy to customize.",
author: "Marcus Rivera",
role: "Frontend Lead at Nexus",
avatar: "/avatars/marcus.jpg",
},
{
quote: "Best component library for landing pages. Nothing else comes close.",
author: "Aiko Tanaka",
role: "Indie Hacker",
avatar: "/avatars/aiko.jpg",
},
]}
/>Notice the theme="dark" prop. This gives the testimonials section a dark background to create visual contrast with the surrounding light sections.
7FAQ section
Address common questions with an expandable accordion. Use FAQAccordion:
<FAQAccordion
id="faq"
title="Frequently asked questions"
items={[
{
question: "Do I need Tailwind CSS?",
answer: "Yes, trink-ui uses Tailwind CSS v4 for styling. Components reference utility classes that Tailwind generates.",
},
{
question: "Can I use this with plain React (no framework)?",
answer: "Absolutely. trink-ui works with Vite, Remix, Next.js, or any React setup that supports Tailwind CSS.",
},
{
question: "Is it accessible?",
answer: "Yes. All components use semantic HTML, support keyboard navigation, and include ARIA attributes where needed.",
},
{
question: "Can I customize the colors?",
answer: "Every color is defined as a CSS variable. Override them in your global CSS to match your brand.",
},
]}
/>8Call to action
Close with a strong call to action using CTACentered:
<CTACentered
theme="dark"
title="Start building your landing page today"
subtitle="Join 10,000+ developers who ship faster with trink-ui."
primaryAction={{ label: "Get Started Free", href: "/signup" }}
secondaryAction={{ label: "Read the Docs", href: "/docs" }}
/>9Footer
Wrap up with a structured footer using FooterColumns:
<FooterColumns
brand={{
name: "Acme",
description: "Building the future of the web, one component at a time.",
}}
columns={[
{
title: "Product",
links: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Changelog", href: "/changelog" },
],
},
{
title: "Resources",
links: [
{ label: "Documentation", href: "/docs" },
{ label: "Blog", href: "/blog" },
{ label: "Support", href: "/support" },
],
},
{
title: "Company",
links: [
{ label: "About", href: "/about" },
{ label: "Careers", href: "/careers" },
{ label: "Contact", href: "/contact" },
],
},
]}
social={[
{ platform: "twitter", href: "https://twitter.com/acme" },
{ platform: "github", href: "https://github.com/acme" },
]}
copyright="2025 Acme Inc. All rights reserved."
/>Complete page code
Here is the entire landing page in a single file. Copy and customize to your needs:
app/page.tsx
import {
NavbarSimple,
HeroCentered,
FeaturesGrid,
PricingCards,
TestimonialsGrid,
FAQAccordion,
CTACentered,
FooterColumns,
} from "@trinkui/react";
export default function LandingPage() {
return (
<main>
<NavbarSimple
brand={{ name: "Acme", href: "/" }}
links={[
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "FAQ", href: "#faq" },
]}
actions={[
{ label: "Sign In", href: "/login", variant: "ghost" },
{ label: "Get Started", href: "/signup", variant: "primary" },
]}
/>
<HeroCentered
badge="Now in beta"
title="Ship your landing page in minutes, not weeks"
subtitle="Production-ready sections that snap together like building blocks."
primaryAction={{ label: "Start Building", href: "/signup" }}
secondaryAction={{ label: "View Components", href: "/components" }}
/>
<FeaturesGrid
id="features"
title="Everything you need to launch"
subtitle="Built by developers, for developers."
features={[
{ icon: "lightning", title: "Fast by default", description: "Optimized rendering with zero layout shift." },
{ icon: "palette", title: "Fully customizable", description: "CSS variables for colors, fonts, and spacing." },
{ icon: "shield", title: "Accessible", description: "Semantic HTML and keyboard navigation." },
{ icon: "code", title: "TypeScript first", description: "Full type safety and autocomplete." },
{ icon: "layers", title: "Composable", description: "Mix and match any sections." },
{ icon: "moon", title: "Dark mode", description: "Light and dark with a single prop." },
]}
/>
<PricingCards
id="pricing"
title="Simple, transparent pricing"
plans={[
{ name: "Starter", price: "$0", period: "forever", features: ["3 projects", "Community support"], action: { label: "Get Started", href: "/signup" } },
{ name: "Pro", price: "$29", period: "/month", features: ["Unlimited projects", "Priority support", "Custom domain"], action: { label: "Start Trial", href: "/signup?plan=pro" }, highlighted: true },
{ name: "Enterprise", price: "Custom", features: ["Everything in Pro", "SSO", "SLA"], action: { label: "Contact Sales", href: "/contact" } },
]}
/>
<TestimonialsGrid
theme="dark"
title="Loved by developers"
testimonials={[
{ quote: "Cut our dev time from 2 weeks to 2 days.", author: "Sarah Chen", role: "CTO at LaunchPad" },
{ quote: "Beautifully designed, easy to customize.", author: "Marcus Rivera", role: "Frontend Lead" },
{ quote: "Best landing page library. Period.", author: "Aiko Tanaka", role: "Indie Hacker" },
]}
/>
<FAQAccordion
id="faq"
title="Frequently asked questions"
items={[
{ question: "Do I need Tailwind CSS?", answer: "Yes, trink-ui uses Tailwind CSS v4." },
{ question: "Is it accessible?", answer: "Yes, all components use semantic HTML." },
{ question: "Can I customize colors?", answer: "Every color is a CSS variable." },
]}
/>
<CTACentered
theme="dark"
title="Start building your landing page today"
subtitle="Join 10,000+ developers who ship faster."
primaryAction={{ label: "Get Started Free", href: "/signup" }}
/>
<FooterColumns
brand={{ name: "Acme", description: "Building the future of the web." }}
columns={[
{ title: "Product", links: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
{ title: "Resources", links: [{ label: "Docs", href: "/docs" }, { label: "Blog", href: "/blog" }] },
{ title: "Company", links: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
]}
copyright="2025 Acme Inc. All rights reserved."
/>
</main>
);
}Tips for a polished result
Alternate light and dark sections
Use the theme prop to create visual rhythm. A common pattern is light hero, light features, dark testimonials, light FAQ, dark CTA.
Control animations
Every section animates on scroll by default. Use animated={false} to disable animations for above-the-fold sections that should appear instantly.
Use section IDs for anchor links
Pass an id prop to sections and reference them with href="#features" in your navbar links for smooth scrolling navigation.