Introduction
Plate UI is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.
This is not a component library. It is how you build your component library.
You know how most traditional component libraries work: you install a package from NPM, import the components, and use them in your app.
This approach works well until you need to customize a component to fit your design system or require one that isn't included in the library. Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.
This is what Plate UI aims to solve. It is built around the following principles:
- Open Code: The top layer of your component code is open for modification.
- Composition: Every component uses a common, composable interface, making them predictable and compatible with shadcn/ui.
- Distribution: A flat-file schema compatible with shadcn CLI to make it easy to distribute components.
- 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.
Open Code
Plate UI hands you the actual component code. You have full control to customize and extend the components to your needs. This means:
- Full Transparency: You see exactly how each component is built.
- Easy Customization: Modify any part of a component to fit your design and functionality requirements.
- AI Integration: Access to the code makes it straightforward for LLMs to read, understand, and even improve your components.
In a typical library, if you need to change a component's behavior, you have to override styles or wrap the component. With Plate UI, you simply edit the component code directly.
Composition
Every component in Plate 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 are not learning different APIs for every new component. Even for third-party ones.
Distribution
Plate UI leverages the power and flexibility of the shadcn CLI and its registry system. This means you can easily add Plate UI components to your project using familiar commands.
- shadcn CLI Compatible: Use the standard
shadcn addcommand to fetch components. - Build Your Own: While Plate UI provides a curated set of components, the system is built so you could even host your own registry of Plate-compatible components.
Beautiful Defaults
Plate 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 Plate 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.
MCP-Ready
Plate includes MCP (Model Context Protocol) compatibility, enabling AI-assisted component management and synchronization.
- Integration: MCP helps AI understand your project's styling, dependencies, and even setup requirements like installation or configurations, directly from the Plate registry.
- Maintenance: When a component in the Plate registry is updated, AI (powered by tools like Cursor) can help pull, merge, and apply these changes effortlessly.
Learn more about how to leverage MCP for your components.