@nayhoo/ui NPM

@nayhoo/ui

A collection of React components, built with Radix Primitives, styled with vanilla-extract.

Installation

npm install @nayhoo/ui

Configuration

Next.js

npm install @vanilla-extract/next-plugin

// next.config.ts

import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
import type { NextConfig } from "next";

const withVanillaExtract = createVanillaExtractPlugin();

const nextConfig: NextConfig = {
  // https://vanilla-extract.style/documentation/integrations/next/
  transpilePackages: ["@nayhoo/ui"],
};

export default withVanillaExtract(nextConfig);

// src/app/provider.tsx

"use client";

import { ThemeProvider } from "@nayhoo/ui/providers";
import React from "react";

type AppProviderProps = {
  children: React.ReactNode;
};

export const AppProvider = ({ children }: AppProviderProps) => {
  return <ThemeProvider>{children}</ThemeProvider>;
};

// src/app/layout.tsx

import "@nayhoo/ui/theme/index.css"; // REQUIRED
import type { Metadata } from "next";
import "./globals.css";
import { AppProvider } from "./provider";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

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

// src/app/page.tsx

"use client";

import { Button } from "@nayhoo/ui/button";

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

Vite

npm install @vanilla-extract/vite-plugin

// vite.config.ts

import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), vanillaExtractPlugin()],
});

// src/main.tsx

import "@nayhoo/ui/theme/index.css"; // REQUIRED
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

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

// src/App.tsx

import { Button } from "@nayhoo/ui/button";
import { ThemeProvider } from "@nayhoo/ui/providers";

function App() {
  return (
    <ThemeProvider>
      <Button onClick={() => alert("Hello!")}>Press me</Button>
    </ThemeProvider>
  );
}

export default App;