Guides

Vite Setup

Get trink-ui working with Vite and React. No extra bundler configuration required.

Prerequisites

Vite 5 or 6 with the React plugin
React 18 or 19
Tailwind CSS v4
Node.js 18+

1Install the package

pnpm

pnpm add @trinkui/react

npm

npm install @trinkui/react

yarn

yarn add @trinkui/react

2Vite configuration

No special Vite configuration is needed. trink-ui ships as standard ESM and CJS, and Vite handles it out of the box. A typical vite.config.ts looks like this:

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

3Add CSS variables

Add the trink-ui CSS variables and Tailwind source scanning directive to your main CSS file:

src/index.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;
}

.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 components in App.tsx

Import trink-ui components and use them directly:

src/App.tsx

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

function App() {
  return (
    <div>
      <HeroCentered
        title="Build beautiful landing pages"
        subtitle="Production-ready components for React and Vite."
        primaryAction={{ label: "Get Started", href: "#features" }}
      />
      <FeaturesGrid
        title="Why choose us"
        features={[
          { icon: "zap", title: "Blazing Fast", description: "Vite HMR + optimized components" },
          { icon: "palette", title: "Customizable", description: "CSS variables for full control" },
          { icon: "code", title: "Developer-First", description: "TypeScript and great DX" },
        ]}
      />
      <CTACentered
        theme="dark"
        title="Start building today"
        primaryAction={{ label: "Install Now", href: "#install" }}
      />
      <FooterSimple
        brand={{ name: "My App" }}
        links={[
          { label: "Privacy", href: "/privacy" },
          { label: "Terms", href: "/terms" },
        ]}
      />
    </div>
  );
}

export default App;

React Router integration

If your Vite project uses React Router, trink-ui components work on any route. Pass route-aware links using the href prop on action buttons:

src/pages/Home.tsx

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

export function HomePage() {
  return (
    <>
      <HeroCentered
        title="Welcome"
        subtitle="The fastest way to launch."
        primaryAction={{ label: "View Pricing", href: "/pricing" }}
        secondaryAction={{ label: "Learn More", href: "/about" }}
      />
      <PricingCards
        title="Plans"
        plans={[
          { name: "Free", price: "$0", features: ["1 project", "Community support"] },
          { name: "Pro", price: "$19/mo", features: ["Unlimited projects", "Priority support"], highlighted: true },
        ]}
      />
    </>
  );
}

For SPA navigation with React Router, you can wrap trink-ui button actions with your own click handlers or use the href values to integrate with useNavigate.

Next step

Follow our step-by-step tutorial to build a complete landing page.

Build a Landing Page