Product guide · Installation

Installation

Add the package, import its theme once, and keep application imports focused on the components you use.

Prerequisites

Use React 18.2 or React 19 with Tailwind CSS v4. Monoline works with Next.js and other ESM-based React build tools.

Install the package

Pick your package manager:

$ pnpm add @chitrank2050/monoline-ui

Add the design tokens

Import the package theme once from your root stylesheet. It defines the CSS variables and registers Monoline's compiled sources with Tailwind.

@import "tailwindcss";
@import "@chitrank2050/monoline-ui/theme.css";

/* The package theme defines colors, typography, spacing, and component tokens. */

Set the theme on <html>

Set data-theme="light" or data-theme="dark" on the root html element.

export default function RootLayout({ children }) {
  return (
    <html lang="en" data-theme="dark">
      <body>{children}</body>
    </html>
  )
}

Import a component

Prefer component subpaths in feature code so bundlers can keep imports narrow.

import { Footer } from "@chitrank2050/monoline-ui/footer"

export default function Page() {
  return (
    <Footer
      size="md"
      columns={[
        { title: "Navigate", links: [{ label: "Projects", href: "/projects" }] },
        { title: "Elsewhere", links: [{ label: "GitHub", href: "https://github.com", external: true }] },
      ]}
    />
  )
}

✓

Verify the setup

Render one component and check it in both themes. Then browse the component reference for props and examples, or jump to Foundations to see the token system.