Using a Component

Components are grouped into Blocks, such as Hero Sections, Pricing Sections or Data Tables. Browse them all on the Components page.

Copy a Component

Open a Block, for example Buttons.
Each Component has a Preview tab and a Code tab. Open Code and press the copy button.
Save the code as its own file, named after the Component:
- Nuxt: components/PricingSection01.vue
- Quasar CLI: src/components/PricingSection01.vue
Use it in a page:

<template>
  <PricingSection01 />
</template>

Nuxt imports it for you. With the Quasar CLI, import it first:

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

Free and Paid Components

Free Components can be copied by anyone, without an account.

Every other Component is a Paid Component. Anyone can preview it, but its code is shown only to holders of All Access or Blocks Pro. Sign in with the account you bought with, and the Code tab shows the source. See Licensing & FAQ for what each Product includes.

Make it yours

Text, links and data are placeholders. Replace them, and move data you repeat into props.
Images point at sample files under /img/... on quasarui.com. Put your own images in public/ and update the paths.
Colours use Quasar's brand colours (primary, secondary, dark and so on). Change them once for the whole app rather than in each Component. See Theming.
Dark mode follows Quasar's Dark plugin and the $dark colours.

Use an AI assistant instead

Claude Code, Claude Desktop and Cursor can search the catalogue and paste Components for you through the MCP Server.

Getting started

Theming