How to use this kit

This kit is meant to be customised further. It’s the start of your own system.

Just like shadcn/ui, this is not meant to be a final component library. It’s how you start building your component library.

To use this kit as the start of your own component library, we recommend the following steps:

  1. Customize the thumbnail to your liking. Give it the name of your design system. see the thumbnail page
  2. Customize the theme to your brand. You can use the first 4 variable collections (semantic colors, typography, border radii and shadows) to theme the kit to your liking.
  3. Now publish the library to your Figma account (this requires at least a professional account). You can use the bookmark icon in the assets panel to find the controls to do so.
  4. Then, consume the library from another file and create your designs. Once again, find the bookmark icon in the assets panel, but this time, add your design library via the “Add to file” function.

Comments? Issues with this kit?

Please log any issues on GitHub. We welcome any feedback.

About Obra Studio

Obra Studio is a boutique design & development studio with roots in Belgium and Mexico. Check out our work and services.