Guides

Next.js Setup

A complete guide to integrating trink-ui with Next.js 14 or 15, covering both App Router and Pages Router.

Prerequisites

Next.js 14 or 15
React 18 or 19
Tailwind CSS v4 configured in your project
Node.js 18+

1Install the package

Install trink-ui and its peer dependencies using your preferred package manager:

pnpm

pnpm add @trinkui/react

npm

npm install @trinkui/react

yarn

yarn add @trinkui/react

2Configure next.config.ts

Add @trinkui/react and @trinkui/shared to the transpile list so Next.js can bundle them correctly:

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["@trinkui/react", "@trinkui/shared"],
};

export default nextConfig;

3Add CSS variables and Tailwind source scanning

trink-ui uses CSS custom properties for theming. Add these to your globals.css along with the Tailwind source directive so component classes are scanned:

app/globals.css

@import "tailwindcss";

/* Scan trink-ui components for Tailwind classes */
@source "node_modules/@trinkui/react/src";

:root {
  --trinkui-bg: 255 255 255;
  --trinkui-fg: 10 10 10;
  --trinkui-primary: 99 102 241;
  --trinkui-primary-fg: 255 255 255;
  --trinkui-secondary: 241 245 249;
  --trinkui-secondary-fg: 15 23 42;
  --trinkui-accent: 249 115 22;
  --trinkui-muted: 100 116 139;
  --trinkui-border: 226 232 240;
  --trinkui-surface: 248 250 252;

  --trinkui-radius-sm: 0.375rem;
  --trinkui-radius-md: 0.75rem;
  --trinkui-radius-lg: 1rem;
  --trinkui-radius-xl: 1.5rem;
  --trinkui-radius-full: 9999px;

  --trinkui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --trinkui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --trinkui-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

  --trinkui-font-heading: "Inter", sans-serif;
  --trinkui-font-body: "Inter", sans-serif;
  --trinkui-font-mono: "JetBrains Mono", monospace;
}

.dark {
  --trinkui-bg: 9 9 11;
  --trinkui-fg: 250 250 250;
  --trinkui-primary: 129 140 248;
  --trinkui-primary-fg: 255 255 255;
  --trinkui-secondary: 24 24 27;
  --trinkui-secondary-fg: 228 228 231;
  --trinkui-accent: 251 146 60;
  --trinkui-muted: 113 113 122;
  --trinkui-border: 39 39 42;
  --trinkui-surface: 18 18 21;
}

4App Router usage

With the App Router, import trink-ui components directly into your page files. Section components that use animations are client components internally, so they work seamlessly in server component pages:

app/page.tsx

import {
  HeroCentered,
  FeaturesGrid,
  PricingCards,
  CTACentered,
  FooterColumns,
} from "@trinkui/react";

export default function HomePage() {
  return (
    <main>
      <HeroCentered
        title="Ship your landing page faster"
        subtitle="Beautiful, accessible components built for conversion."
        primaryAction={{ label: "Get Started", href: "/signup" }}
        secondaryAction={{ label: "View Demo", href: "/demo" }}
      />
      <FeaturesGrid
        title="Why teams choose us"
        features={[
          { icon: "lightning", title: "Fast", description: "Optimized for performance" },
          { icon: "palette", title: "Beautiful", description: "Designed with care" },
          { icon: "shield", title: "Secure", description: "Built with best practices" },
        ]}
      />
      <PricingCards
        title="Simple pricing"
        plans={[
          { name: "Starter", price: "$9/mo", features: ["5 projects", "Basic support"] },
          { name: "Pro", price: "$29/mo", features: ["Unlimited projects", "Priority support"], highlighted: true },
        ]}
      />
      <CTACentered
        title="Ready to get started?"
        subtitle="Join thousands of teams shipping faster."
        primaryAction={{ label: "Start Free Trial", href: "/signup" }}
      />
      <FooterColumns
        brand={{ name: "Acme", description: "Building the future." }}
        columns={[
          { title: "Product", links: [{ label: "Features", href: "/features" }] },
          { title: "Company", links: [{ label: "About", href: "/about" }] },
        ]}
      />
    </main>
  );
}

Pages Router usage

If you are using the older Pages Router, the same imports work. Make sure your _app.tsx imports the global CSS file:

pages/_app.tsx

import type { AppProps } from "next/app";
import "../styles/globals.css";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

pages/index.tsx

import { HeroCentered, FeaturesGrid } from "@trinkui/react";

export default function HomePage() {
  return (
    <>
      <HeroCentered
        title="Welcome to our product"
        subtitle="The best way to build landing pages."
        primaryAction={{ label: "Get Started", href: "/signup" }}
      />
      <FeaturesGrid
        title="Features"
        features={[
          { icon: "zap", title: "Fast", description: "Lightning quick" },
          { icon: "heart", title: "Loved", description: "By developers" },
        ]}
      />
    </>
  );
}

Server Components note

trink-ui section components use "use client" internally because they rely on animation hooks. You can import them directly in Server Components without any wrapper. If you want to avoid client-side JavaScript entirely, pass animated={false} to disable animations and keep the component fully static:

// Fully static — no client JS
<HeroCentered
  animated={false}
  title="Static hero"
  subtitle="No animations, no client bundle."
  primaryAction={{ label: "Learn More", href: "/docs" }}
/>

Common issues

"use client" directive errors

If you see errors about client components in server components, make sure @trinkui/react is listed in transpilePackages in your next.config.ts.

Missing or unstyled components

Verify that the CSS variables are defined in your globals.css and that the @source directive points to the correct node_modules path.

Turbopack compatibility

trink-ui is fully compatible with Turbopack. If you run next dev --turbopack, no extra configuration is required. The transpilePackages setting works identically.

Next step

Build a complete landing page from scratch using trink-ui sections.

Build a Landing Page