Create a UI kit

Create a user interface (UI) kit with common components that lets you copy/paste elements —like footers, calls to action, and buttons — across projects.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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.


Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top