Installation
Neumorphism UI is a shadcn Registry built with Base UI primitives. It copies component source and CSS tokens into your project. React, Tailwind CSS, and the shadcn CLI are required.
1. Initialize shadcn
If your project does not have components.json, initialize shadcn first.
npx shadcn@latest init2. Connect the Registry
Register the namespace and the current Registry URL with the CLI.
npx shadcn@latest registry add @neumorphism-ui=https://neumorphism-ui.dev/r/{name}.jsonAdd it to components.json manually
The namespace is @neumorphism-ui, and the URL template is https://neumorphism-ui.dev/r/{name}.json.
{
"registries": {
"@neumorphism-ui": "https://neumorphism-ui.dev/r/{name}.json"
}
}3. Add a component
Install the shared base once. Adding components afterward does not reinstall your selected theme.
npx shadcn@latest add @neumorphism-ui/neumorphism-uiAfter installing the base, import the font CSS once in app/layout.tsx (Next.js) or src/main.tsx (Vite). Your bundler serves the font assets with your application.
import "pretendard/dist/web/variable/pretendardvariable.css";npx shadcn@latest add @neumorphism-ui/button --overwriteUse --overwrite only to replace the initially scaffolded button. Commit and review an existing customized button before replacing it.
4. Apply a theme
A style item overrides palette, shadow, and radius tokens without changing component source. Use a dry run to review changes before installation.
Dry run
npx shadcn@latest add @neumorphism-ui/style-sage --dry-runInstall
npx shadcn@latest add @neumorphism-ui/style-sageReview other presets and detailed tokens in Theme Studio.