Gathering detailed insights and metrics for @nayhoo/ui
Gathering detailed insights and metrics for @nayhoo/ui
Installations
npm install @nayhoo/uiDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
20.19.1
NPM Version
10.8.2
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
0.16.0
Package Id
@nayhoo/ui@0.16.0
Unpacked Size
11.53 MB
Size
2.55 MB
File Count
395
NPM Version
10.8.2
Node Version
20.19.1
Published on
May 24, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
23
@radix-ui/colors@radix-ui/react-aspect-ratio@radix-ui/react-avatar@radix-ui/react-checkbox@radix-ui/react-dialog@radix-ui/react-dropdown-menu@radix-ui/react-form@radix-ui/react-icons@radix-ui/react-label@radix-ui/react-menu@radix-ui/react-popover@radix-ui/react-select@radix-ui/react-separator@radix-ui/react-slot@radix-ui/react-switch@radix-ui/react-toast@radix-ui/react-tooltip@vanilla-extract/css@vanilla-extract/esbuild-plugin@vanilla-extract/recipes@vanilla-extract/sprinkleshomemade-recipestsup
Peer Dependencies
1
Dev Dependencies
7
@nayhoo/ui
A collection of React components, built with Radix Primitives, styled with vanilla-extract.
Installation
1npm install @nayhoo/ui
Configuration
Next.js
1npm install @vanilla-extract/next-plugin
1// next.config.ts 2 3import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin"; 4import type { NextConfig } from "next"; 5 6const withVanillaExtract = createVanillaExtractPlugin(); 7 8const nextConfig: NextConfig = { 9 // https://vanilla-extract.style/documentation/integrations/next/ 10 transpilePackages: ["@nayhoo/ui"], 11}; 12 13export default withVanillaExtract(nextConfig);
1// src/app/provider.tsx 2 3"use client"; 4 5import { ThemeProvider } from "@nayhoo/ui/providers"; 6import React from "react"; 7 8type AppProviderProps = { 9 children: React.ReactNode; 10}; 11 12export const AppProvider = ({ children }: AppProviderProps) => { 13 return <ThemeProvider>{children}</ThemeProvider>; 14};
1// src/app/layout.tsx 2 3import "@nayhoo/ui/theme/index.css"; // REQUIRED 4import type { Metadata } from "next"; 5import "./globals.css"; 6import { AppProvider } from "./provider"; 7 8export const metadata: Metadata = { 9 title: "Create Next App", 10 description: "Generated by create next app", 11}; 12 13export default function RootLayout({ 14 children, 15}: Readonly<{ 16 children: React.ReactNode; 17}>) { 18 return ( 19 <html lang="en" suppressHydrationWarning> 20 <body> 21 <AppProvider>{children}</AppProvider> 22 </body> 23 </html> 24 ); 25}
1// src/app/page.tsx 2 3"use client"; 4 5import { Button } from "@nayhoo/ui/button"; 6 7export default function Home() { 8 return <Button />; 9}
Vite
1npm install @vanilla-extract/vite-plugin
1// vite.config.ts 2 3import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin"; 4import react from "@vitejs/plugin-react"; 5import { defineConfig } from "vite"; 6 7// https://vite.dev/config/ 8export default defineConfig({ 9 plugins: [react(), vanillaExtractPlugin()], 10});
1// src/main.tsx 2 3import "@nayhoo/ui/theme/index.css"; // REQUIRED 4import { StrictMode } from "react"; 5import { createRoot } from "react-dom/client"; 6import App from "./App.tsx"; 7import "./index.css"; 8 9createRoot(document.getElementById("root")!).render( 10 <StrictMode> 11 <App /> 12 </StrictMode>, 13);
1// src/App.tsx 2 3import { Button } from "@nayhoo/ui/button"; 4import { ThemeProvider } from "@nayhoo/ui/providers"; 5 6function App() { 7 return ( 8 <ThemeProvider> 9 <Button onClick={() => alert("Hello!")}>Press me</Button> 10 </ThemeProvider> 11 ); 12} 13 14export default App;
No vulnerabilities found.
No security vulnerabilities found.