Getting Started

Installation

Get trink-ui up and running in your React project in under 2 minutes.

Prerequisites

React 18 or 19
Tailwind CSS v4 (configured in your project)
Node.js 18+

1Install the package

pnpm

pnpm add @trinkui/react

npm

npm install @trinkui/react

yarn

yarn add @trinkui/react

2Configure Tailwind CSS

Add the trink-ui source to your Tailwind CSS configuration so it scans the component classes. In your main CSS file:

globals.css

@import "tailwindcss";

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

3Add CSS variables

trink-ui uses CSS custom properties for theming. Add these to your global CSS (or copy from our default theme):

globals.css

: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;
}

/* Dark mode */
.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;
}

4Use a component

Import any component and drop it into your page:

page.tsx

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

export default function LandingPage() {
  return (
    <>
      <HeroCentered
        title="Ship faster with trink-ui"
        subtitle="Production-ready landing page components."
        primaryAction={{ label: "Get Started", href: "/signup" }}
      />
      <FeaturesGrid
        title="Everything you need"
        features={[
          { icon: "⚡", title: "Fast", description: "Optimized for performance" },
          { icon: "🎨", title: "Beautiful", description: "Designed with care" },
          { icon: "♿", title: "Accessible", description: "Built for everyone" },
        ]}
      />
    </>
  );
}

Framework Setup

Next.js (App Router)

Add @trinkui/react to transpilePackages in your next.config.ts:

// next.config.ts
const nextConfig = {
  transpilePackages: ["@trinkui/react"],
};

Vite

No extra configuration needed. trink-ui works out of the box with Vite and React.

Next step

Learn how to customize colors, fonts, and spacing with CSS variables.

Theming