Installation

trc-ui installs with a single command and works with React 18 or later: Next.js, Vite, or any other tool.

Install the package

npm install trc-ui

The package only depends on react and react-dom. It ships its components as ESM and CommonJS, its TypeScript types, and a single stylesheet.

Import the styles

Import the stylesheet once, at the root of your app, then add the trc class to <body>: it sets the near-black background, the text color and the font.

import "trc-ui/styles.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="trc">{children}</body>
    </html>
  );
}

Load the font

The thin headings rely on Montserrat (weights 300, 400 and 500). The font is not bundled with the package: load it, then pass it to trc-ui through the --trc-font variable.

import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ subsets: ["latin"], weight: ["300", "400", "500"], variable: "--font-montserrat" });

// <html className={montserrat.variable}>

:root {
  --trc-font: var(--font-montserrat), ui-sans-serif, system-ui, sans-serif;
}

Without Next.js, a Google Fonts tag is enough; trc-ui then uses “Montserrat” by default.

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet" />

Your first component

import { Heading, PillButton, Text } from "trc-ui";

export function Welcome() {
  return (
    <section>
      <Heading as="h1" size="display">Welcome to *deep black.*</Heading>
      <Text size="lg">The words between asterisks take the accent color.</Text>
      <PillButton solid>Get started</PillButton>
    </section>
  );
}

With a router

Links accept your router's link component: as on PillLink and Card, linkAs on SiteHeader and SiteFooter.

import Link from "next/link";
import { PillLink, SiteHeader } from "trc-ui";

<PillLink as={Link} href="/pricing">See pricing</PillLink>
<SiteHeader linkAs={Link} logo={<Logo />} logoLabel="Home" nav={nav} />

Interactive components already carry the "use client" directive: they work as-is in the Next.js App Router.