- Create APIsDesign REST and GraphQL Content Delivery APIs to connect to any frontend.
- Content ManagementCraft experiences and easily manage editing, publishing, and translation.
- CustomizationPersonalize your CMS to meet your project's unique requirements.
- CollaborationWork together easily on code and content.
- HostingHost your projects on robust, secure servers in minutes.
- SecurityImplement robust security measures to protect your information.
- EcommerceLevel up your eCommerce experiences
- Mobile applicationsOne CMS, any devices.
- Corporate siteManage your brand narrative.
Looking for our logo ?
- Last updated: January 18, 2023 (Strapi v4 era)
- 3 min read
Introducing the Strapi UI Kit
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.
Get started
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).
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!