Getting Started

Install NeumorUI and render your first neumorphic component in under a minute.

1. Install

Use your package manager of choice:

bash

# pnpm
pnpm add neumorui

# npm
npm install neumorui

# yarn
yarn add neumorui

2. Import the stylesheet

Import once at your app root so CSS variables and animations are available everywhere.

Next.js (App Router)

Add the import to app/layout.tsx:

tsx

import "neumorui/styles";
import { NeuProvider } from "neumorui";

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

Vite / CRA / Remix

Add the import to your entry file (e.g. main.tsx):

tsx

import "neumorui/styles";
import { NeuProvider } from "neumorui";
import App from "./App";
import ReactDOM from "react-dom/client";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <NeuProvider>
    <App />
  </NeuProvider>
);

3. Use a component

Import the components you need. Tree-shaking ensures only what you use ends up in the bundle.

tsx

import { Button, Card, Input } from "neumorui";

export default function Demo() {
  return (
    <Card>
      <h2>Sign in</h2>
      <Input label="Email" placeholder="you@example.com" />
      <Button variant="primary">Continue</Button>
    </Card>
  );
}

That's it

You're ready to build. Browse the sidebar for the full component reference, or jump into:

Theming — customize colors, radius, font without forking.
SSR + Next.js — hydration-safe usage, server components.

Requirements

React 18 or 19
TypeScript 5+ (optional but recommended)
A bundler that supports ESM (Vite, Next.js, Remix, etc.)
Tailwind CSS is not required — NeumorUI ships its own CSS.