Installation | Neumorphism UI

Requirements

You need a React 19 project with Tailwind CSS v4. Components work with Next.js and Vite. Run this from your project folder if shadcn is not initialized yet.

npx shadcn@latest init

Choose Base UI if the CLI asks which component library to use.

Fastest setup

@neumorphism-ui is listed in the official shadcn directory. The CLI resolves its address automatically, so run the commands below without a separate registry registration.

Install the shared styles once, then add your first component. The base provides light and dark colors, shadows, radii and utilities.

npx shadcn@latest add @neumorphism-ui/neumorphism-ui

Import the font CSS once in app/layout.tsx or src/app/layout.tsx (Next.js), or src/main.tsx (Vite). Your bundler serves the font files with your application.

import "pretendard/dist/web/variable/pretendardvariable.css";

npx shadcn@latest add @neumorphism-ui/button

If shadcn init created utils.ts and button.tsx, accept the replacement prompts for those default files when installing the base and Button. For customized utilities or components, use the existing-project review below to compare and merge your changes.

Use a fork or local registry address

To use another registry instead of the official address, replace the endpoint below. Register it with the CLI or merge the registries entry into components.json, keeping your existing aliases and settings.

npx shadcn@latest registry add @neumorphism-ui=https://neumorphism-ui.andongmin.com/r/{name}.json

{
  "registries": {
    "@neumorphism-ui": "https://neumorphism-ui.andongmin.com/r/{name}.json"
  }
}

Check that it works

Render the installed Button in one of your pages.

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

export default function Example() {
  return <Button variant="primary">Get started</Button>;
}

A soft button with a shadow and blue accent means setup worked. If the default shadcn button remains, check that components/ui/button.tsx contains the installed source.

Browse components →

Existing projects

The shared styles affect the whole project. Commit your current work and inspect the changes before installation. Pay particular attention to global CSS, components.json, dependencies and utilities.

npx shadcn@latest view @neumorphism-ui/neumorphism-ui

npx shadcn@latest add @neumorphism-ui/neumorphism-ui --dry-run

Add more components

Use the install command on each component page. The CLI installs required packages and supporting components automatically. Compare proposed changes when you already have customized files.

npx shadcn@latest add @neumorphism-ui/dialog
npx shadcn@latest add @neumorphism-ui/card

Choose a theme

The default Air theme includes light and dark surfaces with a blue accent. Install one named theme if you want another palette. Inspect changes with a dry run first.

npx shadcn@latest add @neumorphism-ui/style-sage --dry-run

npx shadcn@latest add @neumorphism-ui/style-sage

Both light and dark tokens are included; your application's .dark class selects the mode. You can also adjust color, depth, light and shape in Theme Studio and copy the CSS.

Theme Studio →

Manual installation and updates

The Component source tab on each component page shows the files and required packages. Installed files belong to your application and do not update automatically. Run a dry run and compare your customizations before updating.

See affected components, API changes and update instructions in GitHub Releases

npx shadcn@latest add @neumorphism-ui/button --dry-run