Create a UI kit

If you find yourself creating the same layouts, elements, and pages over and over again, save yourself time and create a UI kit. A UI kit is a library of content with common page elements, like footers and calls to action (CTA), you can reuse in new projects. This includes style guide templates and blog templates. 

In this lesson:

1. Create a UI kit
2. Copy/paste a footer
3. Copy/paste a CTA
4. Copy/paste a button
5. Clone our sample UI kit

Learn more about copying and pasting between projects.

Create a UI kit

To make your own UI kit:

1. Create a project (or a new page in your project) 
2. Style common elements or components you’d like to reuse
3. Copy/paste the elements you’d like to reuse into another project. 

Pasting a UI kit into another project sets up classes ready to use in your new project. 

Copy/paste a footer

To add a footer to your UI kit:

1. Copy a previously created footer
2. Open a new project (or page) to serve as your UI kit
3. Paste the footer in the new project
   

Once the footer is in the destination project, you can style it however you want to match the destination project.

Copy/paste a CTA

To add a CTA to your UI kit:

1. Locate a CTA you’ve previously created (e.g., a form that serves as a CTA)
2. Copy the form
3. Open the destination project
4. Paste the form
   

Note: while all the form settings in the Designer copy over to your new project, you’ll need to update your project settings. 

1. Open your project Settings in your Dashboard 
2. Click the Forms tab
3. Fill out the Form notification section to set up your form submission details

Copy/paste a button

To add a button to your UI kit:

1. Copy a previously created button
2. Open your destination project
3. Paste the button
   

And there you have it! Remember, you can copy/paste any  frequently used elements into your UI kit to save yourself time in the future. Here’s to even quicker design!

Clone our sample UI kit

Speaking of quick design — we've made a small sample UI kit for this lesson that you can clone and reuse as you wish. Clone the UI kit project to your account, then copy/paste elements into every new project to kickstart your next website with a clean style guide.