Nasco
Documentation

Install the package and import the stylesheet once — that's the whole setup.
No Tailwind configuration, no content scanning, no theme copying required.
Reach out to us

Getting Started

Everything you need to use Nasco in a Next.js project — from installation to your first rendered component. No Tailwind configuration, content scanning or theme copying is required: the styles ship precompiled with the package.

  1. 1

    Install the package

    Requires Next.js 14/15 (App Router) and React 18/19.

    npm i nasco
  2. 2

    Import the stylesheet once

    Add it to your root layout. If your app has its own global stylesheet, import nasco's after it.

    // app/layout.tsx
import "./globals.css";
import "nasco/styles.css";
  3. 3

    Enable dark mode (optional)

    All components ship light and dark styles, toggled via the dark class — pair them with next-themes and the built-in ThemeToggler.

    <ThemeProvider attribute="class" defaultTheme="light">
  {children}
</ThemeProvider>
  4. 4

    Use your first component

    Import any component and customize it via typed props and className. Pick a module from the sidebar to see live previews and code for each one.

    import { Button } from "nasco";

<Button variant="outlined" size="lg" href="/docs">
  Get started
</Button>
  5. 5

    Re-brand via CSS variables (optional)

    Every color resolves to a --nasco-* token — override them in your own stylesheet, no rebuild needed.

    :root {
  --nasco-primary: #7c3aed;
  --nasco-black-section: #101426;
}