Installation: Next.js

Add AsheeUI to a Next.js project with App Router or Pages Router.

Create a project

If you're starting fresh, scaffold a Next.js app:

pnpm create next-app my-app

If you have an existing project, skip to the next step.

Install packages

pnpm add asheeui@latest

Configure Tailwind

Add the AsheeUI styles import to your global CSS file. The CLI does this automatically, but if you're setting up manually:

app/globals.css or styles/globals.css

css

@import "tailwindcss";
@import "asheeui/styles";

Add the provider

App Router

Wrap your root layout with AsheeUIProvider:

app/layout.tsx

jsx

import type { Metadata } from "next";
import { AsheeUIProvider } from "asheeui";

export const metadata: Metadata = {
  title: "My App",
};

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <AsheeUIProvider>{children}</AsheeUIProvider>
      </body>
    </html>
  );
}

Pages Router

Wrap your _app.tsx component:

pages/_app.tsx

jsx

import type { AppProps } from "next/app";
import { AsheeUIProvider } from "asheeui";

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

Framework-specific notes

suppressHydrationWarning: Required on the <html> element to prevent hydration mismatches from theme switching.
"use client": The provider is a client component. In App Router, layouts can be Server Components by default, but wrapping with AsheeUIProvider works because it's imported and used in the client-rendered body.
CSS import order: The @import "asheeui/styles" must come after @import "tailwindcss" to ensure Tailwind utilities can override AsheeUI styles when needed.

Verify it works

Render a Button in one of your pages:

jsx

import { Button } from "asheeui";

export default function Home() {
  return <Button>Hello AsheeUI</Button>;
}

You should see a styled button with the default theme. Open your browser's dev tools and check that the asheeui styles are loaded.