Beautiful UI Blocks, Crafted with Tailwind CSS for Vue.js

A collection of prebuilt Vue.js components styled with Tailwind CSS to help you quickly design and develop beautiful user interfaces.

Official page (https://indiebold.com)

Live demo (https://indiebold-ui.netlify.app)

---

---

Getting Started

1. Install Tailwind CSS
   Follow the official Tailwind CSS installation guide for Vite-based projects.

2. Include Remix Icon
   Add the following import at the top of your main CSS file to use the Remix Icon icon set:

   @import url('https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css');

---

UI Blocks

Each folder contains Vue components for different interface elements:

• Collaboration
• Communication
• Dropdown
• Misc
• Navigation
• Review
• Stats

---

Custom CSS Snippets

In your main CSS file (e.g., main.css or App.css), you can also include these helpful utility class:

@import url('https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css');
@import "tailwindcss";

/* Menu separator style */
.menu-separator {
  border: none;
  background: linear-gradient(
    90deg,
    currentColor 4px,
    transparent 4px
  )
  50% 50% / 8px 1px repeat no-repeat;
  color: rgba(204, 204, 204, 1);
  height: 0.25rem;
  margin: 0.5rem 0;
}

---

👀 Curious to Explore More?

Check out LAB-CH3 for a growing collection of current and future templates.

If you’ve found this helpful, consider fueling my creativity!