Introducing the Strapi UI Kit

Strapi UI Kit is a design library of components based on Figma. It’s composed of buttons, modals, footers, headers, inputs, and other design elements. Everything has been made to follow contrast accessibilities and suit any need.

This document is also the single source of truth for our team, which means you will always have the most up-to-date designs to play with. This file is free, so anyone can duplicate it, as long as you have a Figma account (they are free as well).

What's the purpose of the Strapi UI Kit? 

As an open company, we want to make sure our design components can be used by anyone and for any use case. We have already released a technical component library, but we decided to go an extra-mile and decided to open-source not only our code, but also the design.

Internally we use this UI kit as a single source of truth. All the components of this file are connected to their technical components via a Storybook and have the same naming. The file is divided into 3 different pages: the design tokens, the components, and the premade pages that you can use as much as you want.

How to use the UI Kit? 

The combination of the UI Kit, the Strapi Design System, and the Plugin API makes magic. Contributing to Strapi, building your workarounds and creating plugins is now much easier.

You can create the interface of your plugin or customize the UI of the Strapi admin panel in a blink of an eye, using ready-made components and design guidelines.

On top of the technical library, contributions are not restricted to developers and are open to anyone, be it developers, designers, product managers, or content creators.

Yet, the UI kit might not be exhaustive for all your different use cases. We tend to keep the UI kit as flexible as possible and introduce new components only if they have several potential applications.

Any feedback is welcome, and we would be happy to address changes.

What's next?

We'll iterate to make sure the contributors and creators have enough material to work and enhance Strapi. They are also welcome to contribute to the Strapi Design System.

Join the v4 Plugin Creation & Migration stream

Today, at 5 PM CET / 8 AM PDT, join our team on Twitch to learn how to create a v4 plugin using the new Plugin API, UI Kit, and Design system. We will also explain how to migrate your plugin from v3 to v4.

Register here not to miss the event!

Build Strapi with us

Strapi is an open-source product that grows thanks to community support and contributions.

Here's how you can help us improve the product:

• Contribute to the project on Github

• Share what features you'd love to have in our public roadmap

• Submit your plugins to the marketplace.

• Showcase the projects you built in Strapi Showcase 

We appreciate each contribution and piece of feedback that you share. Stay safe and tuned for more updates!