Beautiful Components for Design Engineers
A collection of copy-&-paste components for quickly building application UIs.
It's open-source and built with Tailwind CSS and Ark UI.
- 🎨 Beautiful Design - Carefully crafted components with attention to detail
- ♿ Accessible - Built on Ark UI for superior accessibility standards
- 🔧 Framework Agnostic - Supports React and SolidJS (with more coming)
- 📦 Copy-Paste Philosophy - Own your code, customize freely
- 📱 Responsive - Mobile-first design approach
- 🎯 TypeScript - Full type safety out of the box
- 🎨 Tailwind CSS v4 - Modern utility-first styling
Ocean UI currently supports the following frameworks with official integration guides:
 Next.js |
 SolidJS |
|---|---|
| Next.js integration | SolidJS integration |
Visit our documentation site to browse components and copy code directly into your project.
Each component is:
- ✅ Production-ready
- ✅ Fully accessible
- ✅ TypeScript typed
- ✅ Customizable via props and className
- ✅ Framework compatible
Browse all available components, view live demos, and copy code directly from our documentation:
Track our progress and see what's coming next! We're building a comprehensive set of ARK UI components, organized by category and prioritized for fast shipping.
Current Status:
- ✅ 1 component completed (Accordion)
- 🚧 34 components planned across 6 development phases
- 🎯 Focus on high-usage, low-complexity components first
- Node.js 18+
- pnpm (recommended) or npm
- TypeScript 5+
# Install dependencies
pnpm install
# Build all packages
pnpm build
# Run development server
pnpm --filter @ocean-ui/website devFor detailed development guidelines, see CONTRIBUTING.md.
We welcome contributions! Whether it's adding new components, improving existing ones, or fixing bugs, your help makes Ocean UI better for everyone.
See CONTRIBUTING.md for detailed guidelines.
Ocean UI is built on top of amazing open-source projects:
- Ark UI - Headless UI components
- Zag.js - State machine primitives
- Tailwind CSS - Utility-first CSS framework
See the LICENSE file for details.
Made with ❤️ by the Ocean UI community