âš¡ Introduction
Welcome to Ocean UI a collection of beautiful, production-ready UI components built on top of Ark UI. Skip months of implementation work. We've transformed the entire Ocean UI design system into code blocks you can drop directly into your project. Get pixel-perfect, accessible components without sacrificing customization or control.
What is Ocean UI?
Ocean UI is a collection of production-ready UI components built on top of Ark UI and powered by Zag.js. It combines the flexibility of copy-paste components with the robustness of a headless UI foundation, giving you the best of both worlds.
Built with Tailwind CSS v4, TypeScript, and designed to work across multiple JavaScript frameworks, Ocean UI is the perfect starting point for any project. Everything you need to design and build modern, beautiful interfaces and websites is right here.
Why Ocean UI?
While other component libraries lock you into a single framework, Ocean UI breaks free from that limitation. Here's what sets us apart:
Multi-Framework Support
Unlike Radix UI, React Aria, or Base UI—which are React-only—Ocean UI provides components for multiple JavaScript frameworks. Whether you're building with React, Solid, Vue, or Svelte, Ocean UI has you covered with framework-specific implementations.
- React - Full React component library
- Solid - Complete SolidJS component set
- Vue - Comprehensive Vue component collection
- Svelte - Full Svelte component suite
Each framework has its own optimized component implementations, but they all share the same design system and accessibility standards. This means you get consistent behavior and styling across frameworks, while using the native patterns and APIs of your chosen framework.
The underlying foundation—Ark UI and Zag.js—uses framework-agnostic state machines, which allows Ocean UI to provide the same high-quality components across all supported frameworks while maintaining framework-specific optimizations and patterns.
Familiar Patterns, Better Foundation
If you're coming from shadcn/ui, you'll feel right at home. Ocean UI provides shadcn/ui-style components but built on Ark UI instead of Radix UI:
- Familiar APIs: Similar props and styling approach to shadcn/ui components
- Familiar Patterns: The same copy-paste philosophy you know and love
- Better Foundation: Built on Ark UI for superior accessibility and cross-framework compatibility
- Easy Migration: Straightforward to switch from shadcn/ui with minimal changes
Built for Accessibility
Accessibility isn't optional—it's the baseline for any modern build. Every Ocean UI component is built on Ark UI, a headless UI library with 45+ components designed to meet accessibility standards and best practices. This means keyboard navigation, focus management, ARIA attributes, and screen reader support are built in from the ground up.
Tech Stack
Ocean UI is built with a modern, powerful stack:
Framework Support: React, Solid, Vue, Svelte
Philosophy
Ocean UI follows the same principles that make copy-paste component libraries powerful:
-
Copy and Paste - Own the source code. No black boxes or hidden dependencies—just clean, readable code you control.
-
Customizable - Modify colors, spacing, animations, or behavior. The code is yours to adapt.
-
TypeScript First - Full type safety with excellent IntelliSense. Every component is fully typed.
-
Tailwind Styled - Easy customization with utility classes. Style components your way.
-
No Lock-in - Modify and extend as needed. No vendor lock-in—just your code in your project.
How Ark UI and Zag.js Make Us Different
Ocean UI is built on Ark UI and Zag.js, which use finite state machines to model component interactions. While Ocean UI provides separate component implementations for each framework, the underlying foundation ensures consistency and quality:
Consistent Behavior: The state machine architecture ensures that components behave the same way across all frameworks. Whether you're using React or Solid, the interaction patterns, keyboard navigation, and accessibility features are identical.
Predictable Logic: State machines provide a clear, testable structure for component behavior. This makes components easier to reason about, debug, and maintain, regardless of which framework implementation you're using.
Unified Accessibility: Keyboard interactions, focus management, and ARIA attributes are handled consistently across all framework implementations, ensuring your components are accessible regardless of whether you choose React, Solid, Vue, or Svelte.
Framework-Native Experience: While the underlying logic is shared, each framework implementation uses native patterns and APIs. React components feel like React, Solid components feel like Solid, and so on—you get the best of both worlds.
How is this different from a library?
Unlike traditional component libraries that you install as a dependency, Ocean UI gives you the source code.
When you select a component, its code is added directly to your project. This means:
- No package dependencies to manage for components
- No vendor lock-in —you own the code
- Full control to modify, extend, or adapt components to your specific needs
- Framework-specific implementations —use the React version in your React project, the Solid version in your Solid project, and so on
Because you own the code, you can customize it to match your exact requirements, integrate it with your existing design system, and evolve it as your needs change.