Free Quasar Components: 100 Designs to Copy

QuasarUI has 100 free Quasar components: hero sections, pricing tables, app layouts, data tables, inputs, dialogs and more. You can copy any of them without an account. This post is a map of where they are, what each group is good for, and how to get one running in a Quasar CLI or Nuxt project.

If you want the story of the site rebuild that made them free, read the new QuasarUI. This post is the practical part: what to copy and how.

What a QuasarUI Component is

Each Component is one Vue single-file component built with Quasar 2 and <script setup>. There is no npm package to install and no wrapper library. You copy the file, and from then on it is your code.

That has a few consequences worth knowing before you start:

• It only depends on Quasar. Spacing and layout use Quasar's own classes (q-pa-md, row, col-12 col-md-6), so there is no extra CSS to load.
• Icons come from two sets. Components use Material Icons (name="search") and Material Design Icons v7 (name="mdi-email"). You enable both once in your config, shown below.
• The data is a placeholder. Text, images and table rows are sample data in the file. You replace them with yours.
• Colors follow your theme. Components use Quasar's brand colors such as primary and secondary, so they pick up whatever your app's theme sets.

Where the free Quasar components are

The catalogue has 440 Components in 56 Blocks. A Block is a group of Components of one kind, like Hero Sections or Data Tables. 100 of the 440 are Free, and 55 of the 56 Blocks have at least one Free Component.

Blocks are tagged by what they are for. Here is how the 100 free ones spread across those tags:

You can filter the Components page by these tags, and Ctrl K (⌘ K on a Mac) searches every Component by name from any page.

Page Sections: build a landing page

This is the biggest group: 25 free Components across 15 Blocks. Every Page Sections Block has at least one free design, so you can put together a full marketing page without paying anything:

• a hero (Hero Sections), a header (Header Sections) and a logo cloud (Logo Sections);
• features (3 free in Feature Sections), stats and testimonials;
• pricing (3 free in Pricing Sections) and an FAQ (2 free);
• team (3 free) and blog sections (3 free);
• a newsletter box (2 free), a contact section, a CTA and a footer.

If you would rather start from a whole page, the Page Examples tag has a free landing page, pricing page, about page and 404 page.

Core Layouts: the app shell

Before you build an admin panel or a dashboard, you need its frame: the header, the drawer, the page container. The Core Layouts tag has 8 free shells:

• Stacked Layouts (2 free): a top bar and the page below it.
• Drawer Layouts (3 free): the classic sidebar app.
• Multi-Column Layouts (2 free): a sidebar plus a secondary column.
• Bottom Navigation Layouts (1 free): tabs at the bottom, for mobile-first apps.

These are built on QLayout, so the header, drawers and page container behave like any Quasar layout when you change them.

Navigation: almost all free

The Navigation tag has the most free Components after Page Sections. All 5 Pagination Components are free, both Steppers are free, and Tabs, App Bars, Vertical Navigation and Command Palettes each have free designs.

Forms, data and feedback

The parts every app needs, with at least one free design in each Block:

• Forms (10 free): Inputs (3 free), Radio Groups, Textareas, a sign-in form, a form layout and a chat box.
• Data Display (7 free): Data Tables (2 free, both built on QTable), Stat Cards and Informational Cards.
• Lists (6 free): Stacked Lists, Grid Lists and Timelines.
• Feedback (7 free): Alerts, Banners, Empty States and Feedback Cards.
• Overlays (4 free): a dialog, a side sheet and two Notify setups.
• Elements (10 free): 4 of the 5 Buttons, all 4 System Banners, a flyout menu and a navigation drawer.
• Headings (6 free): page, card and section headings.

How to copy a free Component

On a Block page, every Component has a Preview tab and a Code tab. The preview can be resized to phone, tablet and desktop widths, so check the design at the size you care about first. Then open Code and press the copy button. For a Free Component that works without signing in.

The Component is now on your clipboard as one .vue file. Where it goes depends on your project.

Paste it into a Nuxt app

With nuxt-quasar-ui, enable the two icon sets once in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["nuxt-quasar-ui"],
  quasar: {
    extras: {
      fontIcons: ["material-icons", "mdi-v7"],
    },
  },
});

Save the Component in app/components/ (or components/ if your project still uses the Nuxt 3 layout), named after it, for example app/components/PricingSection01.vue. Nuxt auto-imports components, so you can use it in a page straight away:

<template>
  <q-page padding>
    <PricingSection01 />
  </q-page>
</template>

Paste it into a Quasar CLI app

In a Quasar CLI project, enable the icon sets in quasar.config (.js or .ts):

export default defineConfig(() => ({
  extras: ["material-icons", "mdi-v7"],
}));

Save the file as src/components/PricingSection01.vue, then import it where you use it:

<template>
  <q-page padding>
    <PricingSection01 />
  </q-page>
</template>

<script setup>
import PricingSection01 from "components/PricingSection01.vue";
</script>

The components alias points to src/components, so the same import line works from any page or layout.

Make a Component yours

A copied Component is a starting point. Three changes turn it into part of your app:

1. Replace the sample data with props. A pricing section with hard-coded plans is fine for a prototype. In a real app, move the plans into a prop so the same file can render different data.
2. Point images at your own files. Sample images load from quasarui.com. Put yours in public/ and change the paths.
3. Set colors once, in your theme. Don't edit color="primary" in every Component. Change what primary means for the whole app, and every Component follows.

The Using a Component guide covers each of these in more detail, including what to do about dark mode.

Free vs Paid Components

The other 340 Components are Paid. Anyone can preview them on the site, including resizing the preview. Their code is available with All Access or Blocks Pro. A Free Component needs no sign-in, no Product and no trial.

If you use an AI editor like Cursor or Claude Code, the QuasarUI MCP Server returns every Free Component without a key, so your editor can paste them for you.

Questions people ask

Do free Quasar components work with Quasar 2 and Vue 3? Yes. Every Component is a Vue 3 single-file component written for Quasar 2, using <script setup>.

Can I use them in a commercial project? Yes, in as many personal and client projects as you like. What you can't do is resell or give away the Components themselves, for example as your own component library.

Do I need TypeScript? No. Almost every Component uses <script setup lang="ts">, which Vite and Nuxt compile without extra setup, and the types are light enough to delete if you prefer plain JavaScript.

Do they work without Nuxt? Yes. Quasar CLI, Nuxt, or a plain Vite app with Quasar's Vite plugin all work. The only requirement is Quasar 2 with the two icon sets.

Start copying

Open the Components page, pick a Block, and copy the first Free Component that fits what you are building. It takes less time than writing the markup yourself.