Introduction
Build consistent React interfaces with soft surfaces and clear interaction states.
Neumorphism UI is a collection of React components that use light and shadow to express depth. Install the source into your project with the shadcn CLI, then read and edit everything you use.
Start here
- Follow Installation to add the shared styles and one Button.
- Confirm that the first button renders correctly in your app.
- Browse the component directory and add only the pieces you need.
You can use your first component before learning the design tokens or registry internals.
Try a complete screen
Open the local CMS, select a draft, edit its title and content, then try previewing and saving. See how selection, input and feedback work together across a complete screen.
Demo changes stay in memory and reset on reload. In your application, connect initialPosts and onSave to your data and handle authentication, persistence and publishing authorization.
Interaction rules
Give depth a purpose
Raised surfaces suggest actions; inset surfaces suggest inputs or pressed states. Group related content on one surface rather than adding shadows to every nested container.
Keep selection visible
A selected tab or filter stays distinct after the pointer leaves. Use color and shape for persistent selection, and retain a separate keyboard focus treatment.
Use consistent light and shape
Share one light direction and surface radius across a screen. Adjust color, depth, light and shape together in Theme Studio to keep components consistent.
Keep input and feedback clear
Keep field labels visible and explain errors near their inputs. Describe saving states, and retain selection, focus and errors when motion is reduced.
What you get
- React 19 components with keyboard and focus behavior from Base UI where needed
- Tailwind CSS v4 tokens for light and dark colors, depth, light direction and shape
- Editable component source installed directly in your application
- Charts and screen templates that demonstrate useful compositions
Installation and customization
The shadcn CLI adds the selected source and required packages to your project. Installed files are application code and do not update automatically. Compare your customizations before applying future changes.
After setup, adjust the design tokens to suit your screen. Use the registry and verification references when you need those details.