This is not a component library. It is how you build your component library for a wide range of JavaScript frameworks.
You know that most popular component libraries are designed to work with a specific JavaScript framework.
This approach works well until you need to work with different JavaScript frameworks, or you need to customize a component to fit your design system. Often, you end up choosing a different component library, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.
This is the problem that shipbase/ui aims to solve. It is built around the following principles:
- Framework-agnostic: shipbase/ui components built on top of Ark UI work with a wide range of JavaScript frameworks, including React, Solid, Vue, and Svelte.
- Composition: Every component uses a common, composable interface, making them predictable.
- Distribution: shipbase/ui is inspired by shadcn/ui, and compatible with shadcn/ui’s distribute system.
- Beautiful Defaults: Carefully chosen default styles, so you get great design out-of-the-box.
- AI-Ready: Open code for LLMs to read, understand, and improve.
Framework-agnostic
Building UI components that work across different JavaScript frameworks presents significant challenges. shipbase/ui is built on top of Ark UI, which is built on top of Zag.js (a UI component library powered by Finite State Machines).
With shipbase/ui, you can simply build apps using consistent components and APIs across different JavaScript frameworks.
Composition
Every component in shipbase/ui shares a common, composable interface. If a component does not exist, we bring it in, make it composable, and adjust its style to match and work with the rest of the design system.
A shared, composable interface means it’s predictable for both your team and LLMs. You don’t need to learn different APIs for every new component, even for third-party ones.
Distribution
shadcn/ui has a code distribution system. shipbase/ui is inspired by it, and compatible with its schema.
You can use shadcn/ui’s schema to distribute your components to other projects or have AI generate completely new components based on the existing structure.
Beautiful Defaults
shipbase/ui comes with a large collection of components that have carefully chosen default styles. They are designed to look good on their own and to work well together as a consistent system:
- Good Out-of-the-Box: Your UI has a clean and minimal look without extra work.
- Unified Design: Components naturally fit with one another. Each component is built to match the others, keeping your UI consistent.
- Easily Customizable: If you want to change something, it’s simple to override and extend the defaults.
AI-Ready
The design of shipbase/ui makes it easy for AI tools to work with your code. Its open code and consistent API allow AI models to read, understand, and even generate new components.
An AI model can learn how your components work and suggest improvements or even create new components that integrate with your existing design.