Quasar Components

Ready-made Quasar UI components for Vue 3 and Nuxt, for when the logic is done and the screen still looks like a default. App layouts, sign-in forms, tables, overlays and landing page sections, each one a single Vue file built only from Quasar's own components. It picks up your theme and drops straight into your project.

Forms

What makes these Quasar components different

Quasar gives you the building blocks: q-btn, q-card, q-table, q-drawer and the rest of the framework's UI components. QuasarUI puts those blocks together into finished screens and sections, so you start from a working sign-in form or dashboard layout instead of a blank page. There is no extra runtime library and nothing new to learn: if you know Quasar, you can read and edit every line.

Plain Vue single-file components
Template and script in one file, with Quasar classes doing most of the styling. No wrapper package to install or keep updated.
Follows your Quasar theme
Colours come from your brand variables and Quasar's colour palette, so a theme change reaches every block.
Responsive from the start
Layouts use Quasar's grid and screen breakpoints, so each block works on phone, tablet and desktop.
Preview before you buy
Every design has a live preview. Free Components copy straight away; the rest unlock with All Access or Blocks Pro.
Use it in client and commercial work
One licence covers unlimited personal and commercial projects. You can change the code however you like.

Quasar component examples by use case

Looking for a Quasar example of a specific screen? These are the Blocks people open most.

Quasar layout examples
App shells with a header, drawer sidebar and page area for admin panels.
Quasar login and sign-in forms
Email and password, social sign-in and split-screen login pages.
Quasar data tables
Sortable q-table layouts with status badges and row actions.
Quasar notify examples
Toasts with undo, reply and confirm actions, built on Quasar Notify.
Quasar dashboard home screens
A complete dashboard home page with key numbers and a recent activity table.
Quasar landing pages
Full marketing pages, plus hero, pricing and FAQ sections to mix and match.

How to add a Quasar component to your project

  1. Have Quasar v2 set up, either with the Quasar CLI or in Nuxt through the nuxt-quasar-ui module. The components use Material Design Icons, so enable the mdi-v7 icon font in your Quasar extras.
  2. Open a Block above and preview the designs on phone, tablet and desktop widths.
  3. Copy the Vue code into your components folder, then swap in your own data and copy.
  4. Adjust colours once in your Quasar brand variables, or build a palette with the Quasar theme builder.

Need a whole app instead?

If you would rather start from a complete admin panel or dashboard, see the Quasar templates. Still choosing a framework? Read the Quasar vs Vuetify vs Naive UI comparison.