Last week, we announced the Strapi v4 stable release, along with the Strapi Design System, which enables everyone to easily customize the admin panel interface. To make UI customization even smoother, we're introducing the Strapi UI Kit.
Simply copy and paste the following command line in your terminal to create your first Strapi v4 project.
npx create-strapi-app@latest my-project --quickstart
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).
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.
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.
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.
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!
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 Strapi Market (marketplace coming soon!)
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!
Maeva is one of the first Strapiers in the team. She's a talented designer, vegetarian, concert lover, and flower and plant enthusiast.
Get all the latest Strapi updates, news and events.