Neumorphic Card
Content with depth and texture.
Accessibility-first
neumorphic React components
25 beautifully crafted components with automatic contrast safety, dual-signaling, keyboard navigation, and one-color theming. Works with React and React Native.
import { AuraformProvider, SoftButton } from '@auraform/react';
function App() {
return (
<AuraformProvider baseColor="#e0e0e0">
<SoftButton variant="primary">Get Started</SoftButton>
</AuraformProvider>
);
}Component Showcase
Live rendered components — not screenshots.
SoftButton
SoftSwitch
72%
CPU
SoftProgress
SoftSegmentedControl
Tab content here.
SoftCard
Built Different
Neumorphism done right — accessible, themeable, and type-safe.
Accessibility First
Automatic WCAG contrast checking, dual-signaling for every state, keyboard navigation, and proper ARIA roles on every component.
One-Color Theming
Pass a single hex color — get a complete neumorphic theme with computed shadows, borders, and semantic colors.
TypeScript Native
Full type safety with exported prop types, required aria-label enforcement on icon buttons, and strict mode compatibility.
React + React Native
Web components with Framer Motion animations. Native primitives with SVG shadows and OS accessibility detection.
Theme Playground
Pick a color, adjust intensity, see live results.
#e0e0e0
Subtle (5)Bold (30)
background: #e0e0e0
lightShadow: #ffffff
darkShadow: #c1b3b3
mode: light
outline: 1px solid rgba(0, 0, 0, 0.1)
Get Started
npm install @auraform/react @auraform/core3 packages·25 components·MIT licensed·TypeScript native