Installation | krz-ui

Recommended for new projects:

Install the package, import the stylesheet once, and you're ready to go — no config required.

Choose the setup that matches your starting point.

Install the packageAdd krz-ui with your favorite package manager.Add the stylesheetImport the styles once at your app's entry.Choose your frameworkNext.js, Vite, Remix and more.

Install the package

Use your package manager to add krz-ui to your project:

pnpm add krz-ui

React 18 or newer is required as a peer dependency.

Add the stylesheet

The components need krz-ui's stylesheet to look right. Import it once, in the file that wraps your whole app. Every page then gets the styles, so you don't import it again in each component. The right file depends on your framework (see below).

import "krz-ui/styles.css";

Prefer CSS? Put an @import at the very top of your global stylesheet instead. Use either the JS import or the CSS import, not both.

globals.css

@import "krz-ui/styles.css";

If you want your own CSS or Tailwind to override krz-ui without specificity fights, import krz-ui/styles.layer.css instead. See Customization.

Choose your framework

Next.js (App Router)

Import the stylesheet in the root layout. Components ship with "use client", so you can use them directly in Server Components.

app/layout.tsx

import "krz-ui/styles.css";
import "./globals.css"; // your own styles after krz-ui, so they win

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

Next.js (Pages Router)

Next.js only allows global CSS imports in pages/_app.tsx, so import it there.

pages/_app.tsx

import "krz-ui/styles.css";
import "../styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Vite

Import it in the entry file that renders your app.

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "krz-ui/styles.css";
import "./index.css";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

Create React App

Same as Vite, but the entry file is src/index.tsx.

src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "krz-ui/styles.css";
import "./index.css";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

React Router / Remix

Import it in the root route, which wraps every page. This works with React Router v7 framework mode and Remix on Vite.

app/root.tsx

import { Links, Meta, Outlet, Scripts } from "react-router"; // "@remix-run/react" on Remix
import "krz-ui/styles.css";

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

Gatsby

Import it in gatsby-browser, which Gatsby loads on every page.

gatsby-browser.tsx

import "krz-ui/styles.css";