Install Tailwind 4 and set up your project. Use Tailwind official guide instead of NuxtTailwind module because it uses Tailwind 3 for the time being.
Find what you like in the catalog.
Click theme in top left corner to tweak colors, spacing & typography live in the editor.
Grab the .vue file and paste into your project. You will unlikely change anything here, but feel free to customize.
Copy generated code of implementation of chosen component into your project. Adjust width, padding, margin and place it where you see fit.
If you want to use multiple components the best way is to use full design system. Copy global Theme styles into your @theme block into assets/css/main.css. You do this only once
If you want to use single component, copy generated styles onto generated implementation of the component. This is a :style binding on the component for one-off theming
If you are happy with the design system, but want a single component to look different, copy generated styles onto implementation of the component. This is also a :style binding on the component for one-off theming
If you chose to use card styles, copy generated styles onto implementation of the component. Paste your chosen .iq-card-* CSS into @layer components in main.css.
Add .iq-cta class definition into @layer components in main.css.
Many Flex Ui Lab components already use these libraries. Even if you haven’t worked with them before, we recommend adding them for full compatibility and the best experience.
Our styling backbone. All Flex Ui Lab components and utilities rely on Tailwind v4 for a unified look and fast customization.
Tailwind CSS docs →Next-level images. Effortless image optimization, lazy-loading, and modern formats—built right into many Flex Ui Lab components.
Nuxt Image docs →Consistent icons everywhere. SVG icons for a unified style and faster UI building.
Nuxt Icon docs →Custom fonts made easy. Fonts integration and optimization for a unique brand feel.
Nuxt Fonts docs →Analytics made simple. Our recommended way to add Google Analytics and scripts, with Nuxt best practices built-in.
Nuxt Script docs →We use cookies
We use cookies and similar technologies to run the site, measure usage, and (with your permission) personalize content and advertising.