Neumorphic
Soft UI neumorphic circle buttons with inset shadow activation state.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | NeuItem[] | DEFAULT_ITEMS | Array of items with id, label, icon SVG, and content node. |
| defaultActive | string | items[0].id | ID of the initially active item. |
| accentColor | string | #3b82f6 | Color for active icons, labels, and the progress pill. |
| bgColor | string | #e0e5ec | Base neumorphic background color. |
When to Use
Use for light-themed dashboards, health/wellness apps, or any interface where a tactile, physical-button feel is desirable. Pairs well with minimal content layouts.
Best Practices
Neumorphism requires a specific mid-tone background (e.g. #e0e5ec) — too light or too dark and the shadows disappear. Keep to 4 items for best balance.
Why This Component Matters
Neumorphism creates the illusion of physical depth on flat screens. The inset shadow on active state provides unmistakable tactile feedback without JavaScript animations.
FAQ
QWhy does the effect require a specific background color?
Neumorphic shadows use a darker and lighter version of the same hue. The shadows only read correctly when the element background matches the container background.
QCan I change the accent color?
Yes — the accentColor prop controls icon color, label color, and the animated progress pills beneath the buttons.
QIs it accessible?
Focus states are preserved. Consider increasing color contrast for accessibility — neumorphism can have low contrast ratios by design.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.