317 views
21. September at 14:39
Suupercharged

How to Integrate Uiverse Elements into Your Webflow Projects

Designing an interactive and visually captivating website has never been easier, thanks to the wide range of resources available online. One of the most exciting tools you can use with Webflow is Uiverse — a community-driven library of customizable UI elements built with pure CSS or Tailwind CSS.

The best part? It's completely free and incredibly simple to integrate with Webflow. Whether you're looking to add unique buttons, loaders, or cards, Uiverse can save you hours of development time while making your website stand out.

In this tutorial, we’ll walk you through how to seamlessly integrate Uiverse elements into your Webflow project in just 5 easy steps.

Step-by-Step: Adding Uiverse Elements to Webflow

1. Select a Uiverse Element

Visit Uiverse.com and browse through their UI elements. Once you’ve found one that fits your design needs, open it to access the HTML and CSS code.

Screenshot of a Uiverse UI element with its code.

2. Copy the CSS Code

Click on the CSS section and hit Copy. This is the styling that makes the element look and function as intended.

Screenshot of the CSS code section of the element with the 'copy' button highlighted.

3. Embed the CSS in Webflow

In Webflow, drag a Code Embed block to the page where you want to have your Uiverse element. Paste the CSS inside <style> tags in the embed editor:

<style>
  /* Paste the CSS here */
</style>

Screenshot of Webflow interface with 'Code Embed' tab open and CSS pasted in the embed editor.

4. Apply the Element’s Class

Return to Uiverse, copy the element's HTML class, and assign it to a Webflow element. This will tell Webflow to use the Uiverse styling.

Screenshot of the HTML code section of the Uiverse element with the element's 'btn-donate' HTML class highlighted.

Webflow interface with the Uiverse element embedded into a project and highlighted. The right side shows the developer's styling panel with a highlighted 'btn-donate' HTML class.

5. Publish Your Webflow Site

Click Publish in Webflow, and your Uiverse element will now appear live on your site.


Why Use Uiverse?

  • Saves time with pre-built, customizable UI elements.
  • Free and open-source.
  • Easy integration with Webflow through standard CSS and classes.

With just a few clicks, you can give your Webflow site a polished, unique look using Uiverse components. Happy designing!

Suupercharged

Christina

Business student → ⚡️Freelance Web Designer. Building @navbargallery • Tweets about design, coding & Webflow • @SchulichSchool Alumni

More Articles

UI UX213 views

The Psychology of Colors in UX/UI Design

In this article, we'll dive into how different colors evoke different emotions and responses, provide guidelines for selecting colors for your design projects, and share practical tips for creating effective and accessible color palettes.