Get NH-UI up and running in your project in under 2 minutes.
pnpm add @noiseheroes/uiReact
^18.0.0 || ^19.0.0React DOM
^18.0.0 || ^19.0.0Tailwind CSS
^3.0.0If you don't have a project yet
npx create-next-app@latest my-app --typescript --tailwind --appcd my-app && pnpm add @noiseheroes/uiWrap your app with NHProvider in your root layout
// app/layout.tsx
import { NHProvider } from '@noiseheroes/ui';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<NHProvider>
{children}
</NHProvider>
</body>
</html>
);
}Add NH-UI to your content paths
// tailwind.config.js
const { heroui } = require("@heroui/react");
module.exports = {
content: [
// ...
"./node_modules/@noiseheroes/ui/dist/**/*.{js,ts,jsx,tsx}",
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}"
],
darkMode: "class",
plugins: [heroui({
themes: {
light: {
colors: {
primary: {
DEFAULT: "#FF5500",
foreground: "#FFFFFF",
},
secondary: {
DEFAULT: "#00D9B5",
foreground: "#000000",
},
},
},
dark: {
colors: {
primary: {
DEFAULT: "#FF5500",
foreground: "#FFFFFF",
},
secondary: {
DEFAULT: "#00D9B5",
foreground: "#000000",
},
},
},
},
})],
}import { NHButton, NHCard, NHInput } from '@noiseheroes/ui';
function App() {
return (
<div className="p-8">
<NHCard className="max-w-md">
<NHCardBody className="space-y-4">
<h2 className="text-2xl font-bold">Welcome to NH-UI</h2>
<NHInput
placeholder="Enter your email"
type="email"
/>
<NHButton color="primary" className="w-full">
Get Started
</NHButton>
</NHCardBody>
</NHCard>
</div>
);
}NH-UI is written in TypeScript and provides full type definitions out of the box.
// Full IntelliSense support
<NHButton
color="primary" // "primary" | "secondary" | "success" | "warning" | "danger"
size="lg" // "sm" | "md" | "lg"
variant="solid" // "solid" | "bordered" | "light" | "flat" | "faded" | "shadow"
isLoading={false} // boolean
startContent={<Icon />}
>
Click me
</NHButton>Install our VSCode extension for:
Make sure you've added the NH-UI and HeroUI paths to your tailwind.config.js content array.
Ensure you have @types/react version 18 or higher installed.
Add darkMode: "class" to your tailwind.config.js and ensure the NHProvider is wrapping your app.