monoline/ui

Get started · ~5 minutes

Installation

Install the package, import the theme once, then use component subpaths in your app code.

01

Prerequisites

Use React 19 or a current Next.js App Router project with Tailwind CSS v4. TypeScript is optional but recommended.

02

Install the package

Pick your package manager:

$ pnpm add @chitrank2050/monoline-ui
03

Add the design tokens

Import the package theme once from your root stylesheet. It defines the CSS variables every component reads.

src/app/globals.css
@import "tailwindcss";
@source "./node_modules/@chitrank2050/monoline-ui/dist/**/*.{js,mjs}";
@import "@chitrank2050/monoline-ui/theme.css";

/* The package theme now owns colours, typography, spacing, and component tokens. */
04

Set the theme on <html>

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

src/app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en" data-theme="dark">
      <body>{children}</body>
    </html>
  )
}
05

Import a component

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

src/app/page.tsx
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 }] },
      ]}
    />
  )
}
✓

You're ready.

Browse the component reference for props and examples, or jump to Foundations to see the token system.