Neumorphic Design System

A cohesive collection of shadcn components reimagined with soft, extruded neumorphic styling. Features light and dark mode support with next-themes.

Card Component
Neumorphic cards with soft shadows and subtle depth

Cards now feature the distinctive neumorphic look with soft inset and outset shadows. They blend seamlessly with the background in light mode and stand out elegantly in dark mode.

Button Variants
Multiple button styles with neumorphic depth

Buttons feature layered shadows and active state scaling for tactile feedback.

Input Field
Text input with inset neumorphic styling

Inputs use inset shadows to create a recessed appearance, giving them a tactile quality.

Button States
Interactive button variations

Default

Outline

Icon Buttons

Form Example
Complete form with neumorphic inputs
Textarea
Multi-line input with neumorphic inset shadow

The recessed appearance makes it clear this is an interactive element.

Controls
Checkboxes and switches with neumorphic styling
Toggles & Badges
Text formatting and status indicators

Text Formatting

Status Badges

ActivePendingDraft
Advanced Form
Complete form showcase with all components
Dialog & Popover
Modal overlays and floating panels
Dropdown & Calendar
Menu systems and date pickers
February 2026
Accordion
Expandable content sections with smooth animations

Neumorphic design is a style that combines the flat and skeuomorphic design approaches. It creates a soft, unified look by using shadows and highlights to make UI elements appear slightly raised or recessed.

Tabs & Toggle Group
Organized navigation with tab-based content

Main dashboard overview and key metrics go here.

Bar Chart
Sample analytics data displayed in a neumorphic container
Line Chart
Trend data with smooth line visualization
Pie Chart
Distribution of product categories
Data Table
Displaying tabular data with neumorphic styling
ProductCategoryPriceStatus
Laptop ProElectronics$1,299In Stock
Wireless MouseAccessories$29.99Low Stock
USB HubAccessories$49.99In Stock
Monitor StandFurniture$79.99Out of Stock
Skeleton Loaders
Placeholder loading states for content
Progress & Select
Progress bars and dropdown selections with neumorphic styling
45%

Selected: option1

Toast Notifications
Custom toast notifications with neumorphic styling

Click the buttons above to see the toast notifications in action.

Design Features
What makes this neumorphic design system special

Light Mode

  • Soft neutral color palette
  • Subtle outset shadows for depth
  • Inset shadows for recessed inputs
  • Smooth transitions on hover

Dark Mode

  • Darker neutral background
  • Enhanced shadow contrast
  • Inverted light highlights
  • Accent color pop

All components automatically adapt to light and dark modes using next-themes. The color system uses precise shadow values for neumorphic depth and tactile appearance across both themes.