open-index/open-npm huggingface dataset:
npm package: @nayhoo/ui
Description: A collection of React components, built with [Radix Primitives](https://www.radix-ui.com/primitives), styled with [vanilla-extract](https://vanilla-extract.style).
Latest version: 0.19.0

# @nayhoo/ui

A collection of React components, built with [Radix Primitives](https://www.radix-ui.com/primitives), styled with [vanilla-extract](https://vanilla-extract.style).

## Installation

```sh
npm install @nayhoo/ui
```

## Configuration

### Next.js

```sh
npm install @vanilla-extract/next-plugin
```

```ts
// 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);
```

```tsx
// 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>;
};
```

```tsx
// 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>
  );
}
```

```tsx
// src/app/page.tsx

"use client";

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

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

### Vite

```sh
npm install @vanilla-extract/vite-plugin
```

```ts
// 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()],
});
```

```tsx
// 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>,
);
```

```tsx
// 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;
```