Live Docs

Navigation

Get Started /

stable

Installation

Pasang Naraya Design System di project Next.js + Tailwind CSS, dari nol sampai komponen pertama render.

pnpm add @naraya/ui @naraya/tokens @naraya/tailwind-preset

Prasyarat

Naraya dibangun untuk React 18/19 + Next.js (App Router) dengan Tailwind CSS v3. Pastikan project kamu sudah punya React & Tailwind sebelum lanjut.

1. Install paket

Pakai package manager favoritmu.

# pnpm
pnpm add @naraya/ui @naraya/tokens @naraya/tailwind-preset

# npm
npm install @naraya/ui @naraya/tokens @naraya/tailwind-preset

# yarn
yarn add @naraya/ui @naraya/tokens @naraya/tailwind-preset

React & React DOM adalah peer dependency — biasanya sudah ada di project Next.js kamu.

2. Pasang Tailwind preset

Preset membawa scale warna, spacing, radius, dan shadow Naraya ke Tailwind.

// tailwind.config.js
module.exports = {
  presets: [require("@naraya/tailwind-preset")],
  content: [
    "./src/**/*.{ts,tsx}",
    // wajib: biar class komponen Naraya ikut ke-scan
    "./node_modules/@naraya/ui/**/*.{ts,tsx}",
  ],
};

3. Import token CSS

Token = CSS variables (warna, spacing, dsb). Import sekali di entry CSS global.

/* app/globals.css */
@import "@naraya/tokens/css";

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Bungkus app dengan AppShell

AppShell menyediakan Theme + Lang + Toast provider sekaligus. Script anti-FOUC mencegah kedipan dark/light saat load.

// app/layout.tsx
import { themeNoFlashScript } from "@naraya/hooks/no-flash-script";
import { AppShell } from "@naraya/ui/app-shell";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="id" suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeNoFlashScript }} />
      </head>
      <body suppressHydrationWarning>
        <AppShell defaultTheme="system" defaultLang="id">
          {children}
        </AppShell>
      </body>
    </html>
  );
}

5. Pakai komponen pertama

import { Button } from "@naraya/ui";
// atau granular (tree-shake max): import { Button } from "@naraya/ui/button";

export default function Page() {
  return <Button tone="primary">Halo Naraya</Button>;
}

Langkah Selanjutnya