react-n-design — a neomorphic React component library with AI chat, RSC, and zero config
I built react-n-design, a React component library with a soft, neomorphic visual style — think subtle shadows that make UI elements look like they are extruded from the surface rather than flat cards or glassmorphism. It is built with TypeScript and styled-components, and ships 40+ components ranging from buttons and modals to a full AIChat interface and a CommandPalette with fuzzy search and keyboard navigation.
A few things I am proud of:
- AI chat out of the box. The AIChat component handles streaming messages, Markdown rendering, typing indicators, and copy-to-clipboard actions. Drop it in, wire `onSend` to your LLM endpoint, and you are done.
- Zero-config install. All dependencies are bundled; npm install react-n-design and import. No extra styled-components or Framer Motion setup required.
- Full React Server Component support. Import from react-n-design/rsc in Next.js App Router without use client creeping into your layout. Client-only APIs are isolated behind the standard entry point.
Get Soumyojyoti Majumdar’s stories in your inbox
Join Medium for free to get updates from this writer.
- Accessibility by default. 41 tests cover the suite, and every component test runs axe-core to enforce zero WCAG violations. RTL, print styles, and touch-optimized hit targets are baked in.
Quick example:
import { AIChat, ThemeContextProvider } from 'react-n-design';
function App() {
return (
<ThemeContextProvider>
<AIChat
messages={messages}
onSend={(msg) => streamResponse(msg)}
isLoading={isStreaming}
/>
</ThemeContextProvider>
);
}I began this project because I was constantly creating the same neomorphic wrappers for my side projects. It evolved into something I hope others will find helpful. If you give it a shot, I’d be thrilled to hear your feedback — or even a pull request! Please star it, give it a break, and let me know what you think is missing.
Live demo: Storybook
NPM: npm install react-n-design
