Serenity UI
Free, open source React, Canvas & WebGL components that make the web feel alive.
Explore Components •
Discord Community •
Twitter / X
Features
- Copy & Paste: Add components via the shadcn CLI or copy source code directly.
- Framework Support: Works with Next.js (App & Pages Router), Vite, Remix, Astro, and React 18/19.
- Customizable: Built with standard Tailwind CSS classes and CSS custom properties.
- Accessible: Semantic markup, ARIA compliance, and keyboard navigation.
Quick Start
1. Using shadcn CLI
Install any component directly into your project using the shadcn registry:
# npm
npx shadcn@latest add ayushmxxn/serenity-ui/vintage-keyboard
# pnpm
pnpm dlx shadcn@latest add ayushmxxn/serenity-ui/vintage-keyboard
# bun
bunx --bun shadcn@latest add ayushmxxn/serenity-ui/vintage-keyboard
2. Manual Installation
- Browse components on serenity-ui.com.
- Click Code on any component to view its source.
- Copy the file into your
components/ directory and install the listed dependencies.
Component Collection
Components
| Component | Description | CLI Command |
|---|
| Vintage Keyboard | Mechanical keyboard with real-time sound synthesis & 3D keycaps | npx shadcn@latest add ayushmxxn/serenity-ui/vintage-keyboard |
