Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/vuetifyjs/vuetify/llms.txt

Use this file to discover all available pages before exploring further.

​
Blueprints

Blueprints are preset configurations that apply consistent styling across your entire application. Vuetify includes three official blueprints based on different Material Design versions: MD1, MD2, and MD3.

​
What is a Blueprint?

A blueprint is a complete Vuetify configuration object that includes:
  • Component defaults
  • Theme colors
  • Icon set configuration
  • Typography and spacing presets
interface Blueprint {
  defaults?: DefaultsOptions
  theme?: ThemeOptions
  icons?: IconOptions
  locale?: LocaleOptions
  date?: DateOptions
  display?: DisplayOptions
  goTo?: GoToOptions
}

​
Using Blueprints

Apply a blueprint when creating your Vuetify instance: 
import { createVuetify } from 'vuetify'
import { md3 } from 'vuetify/blueprints'

const vuetify = createVuetify({
  blueprint: md3,
})

​
Material Design 3 (MD3)

The latest Material Design specification with modern, rounded components.

​
Key Features

  • Large border radius on buttons (rounded: 'xl')
  • Outlined variant for inputs
  • Flat app bars
  • Divided date picker
  • Rounded cards and chips

​
Component Defaults

{
  defaults: {
    VAppBar: {
      flat: true,
    },
    VAutocomplete: {
      variant: 'outlined',
    },
    VBtn: {
      color: 'primary',
      rounded: 'xl',
    },
    VCard: {
      rounded: 'lg',
    },
    VCheckbox: {
      color: 'secondary',
      inset: true,
      indentDetails: true,
    },
    VChip: {
      rounded: 'sm',
    },
    VCombobox: {
      variant: 'outlined',
    },
    VDatePicker: {
      controlHeight: 48,
      color: 'primary',
      divided: true,
      elevation: 1,
      rounded: 'xl',
      VBtn: {
        color: 'high-emphasis',
        rounded: 'circle',
      },
    },
    VSelect: {
      variant: 'outlined',
    },
    VTextField: {
      variant: 'outlined',
    },
    VTextarea: {
      variant: 'outlined',
    },
  },
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#6750a4',
          secondary: '#b4b0bb',
          tertiary: '#7d5260',
          error: '#b3261e',
          surface: '#fffbfe',
        },
      },
    },
  },
}

​
Visual Style

<!-- MD3 buttons are highly rounded -->
<v-btn>Default</v-btn>
<!-- Renders with rounded="xl" (24px border radius) -->

​
Material Design 2 (MD2)

Material Design 2 emphasizes filled inputs and moderate rounding.

​
Key Features

  • Filled variant for inputs
  • Medium border radius (rounded: 'md')
  • Uppercase button text
  • Indented form field details

​
Component Defaults

{
  defaults: {
    global: {
      rounded: 'md',
    },
    VAutocomplete: {
      variant: 'filled',
    },
    VBtn: {
      class: 'text-uppercase',
      color: 'primary',
    },
    VCheckbox: {
      color: 'secondary',
      indentDetails: true,
    },
    VCombobox: {
      variant: 'filled',
    },
    VDatePicker: {
      color: 'primary',
      controlHeight: 56,
      elevation: 2,
      rounded: 'md',
      VBtn: {
        color: 'high-emphasis',
        rounded: 'circle',
      },
    },
    VSelect: {
      variant: 'filled',
    },
    VTextField: {
      variant: 'filled',
    },
    VTextarea: {
      variant: 'filled',
    },
  },
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#6200EE',
          'primary-darken-1': '#3700B3',
          secondary: '#03DAC6',
          'secondary-darken-1': '#018786',
          error: '#B00020',
        },
      },
    },
  },
}

​
Visual Style

<!-- MD2 uses filled inputs by default -->
<v-text-field label="Name" />
<!-- Renders with variant="filled" -->

<!-- Buttons have uppercase text -->
<v-btn>Submit</v-btn>
<!-- Renders as "SUBMIT" -->

​
Material Design 1 (MD1)

The original Material Design with sharp corners and underlined inputs.

​
Key Features

  • Underlined variant for inputs
  • Sharp corners (rounded: 0 on buttons)
  • Uppercase button text
  • Small global border radius

​
Component Defaults

{
  defaults: {
    global: {
      rounded: 'sm',
    },
    VAvatar: {
      rounded: 'circle',
    },
    VAutocomplete: {
      variant: 'underlined',
    },
    VBtn: {
      class: 'text-uppercase',
      color: 'primary',
      rounded: 0,  // Sharp corners
    },
    VCheckbox: {
      color: 'secondary',
      indentDetails: false,
    },
    VCombobox: {
      variant: 'underlined',
    },
    VDatePicker: {
      color: 'primary',
      controlHeight: 44,
      elevation: 1,
      rounded: 0,
      VBtn: {
        color: 'high-emphasis',
        rounded: 'circle',
      },
    },
    VSelect: {
      variant: 'underlined',
    },
    VTextField: {
      variant: 'underlined',
    },
    VTextarea: {
      variant: 'underlined',
    },
  },
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#3F51B5',
          'primary-darken-1': '#303F9F',
          'primary-lighten-1': '#C5CAE9',
          secondary: '#FF4081',
          'secondary-darken-1': '#F50057',
          'secondary-lighten-1': '#FF80AB',
          accent: '#009688',
        },
      },
    },
  },
}

​
Visual Style

<!-- MD1 uses underlined inputs -->
<v-text-field label="Name" />
<!-- Renders with variant="underlined" -->

<!-- Buttons have no border radius -->
<v-btn>Submit</v-btn>
<!-- Renders with sharp corners -->

​
Customizing Blueprints

You can extend or override blueprint settings: 
import { md3 } from 'vuetify/blueprints'

const vuetify = createVuetify({
  blueprint: md3,
  // Override specific settings
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#FF5722',  // Custom primary color
        },
      },
    },
  },
  defaults: {
    VBtn: {
      rounded: 'lg',  // Less rounded than MD3 default
    },
  },
})

​
Creating Custom Blueprints

Define your own blueprint for consistent styling: 
import type { Blueprint } from 'vuetify'
import { mdi } from 'vuetify/iconsets/mdi'

export const myBrand: Blueprint = {
  defaults: {
    global: {
      rounded: 'lg',
    },
    VBtn: {
      color: 'primary',
      rounded: 'pill',
      elevation: 0,
    },
    VCard: {
      elevation: 2,
      rounded: 'xl',
    },
    VTextField: {
      variant: 'outlined',
      color: 'primary',
    },
  },
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#0066CC',
          secondary: '#00CC66',
          accent: '#FF6B35',
          background: '#F8F9FA',
          surface: '#FFFFFF',
        },
      },
      dark: {
        colors: {
          primary: '#3399FF',
          secondary: '#33FF99',
          accent: '#FF9966',
          background: '#1A1A1A',
          surface: '#2D2D2D',
        },
      },
    },
  },
  icons: {
    defaultSet: 'mdi',
    sets: { mdi },
  },
}
Use your custom blueprint: 
import { myBrand } from './blueprints/my-brand'

const vuetify = createVuetify({
  blueprint: myBrand,
})

​
Blueprint Comparison

FeatureMD1MD2MD3
Input VariantUnderlinedFilledOutlined
Button Radius0 (sharp)md (8px)xl (24px)
Global Radiussm (2px)md (8px)Default (4px)
Button TextUppercaseUppercaseNormal
Date Picker Height44px56px48px
App BarDefaultDefaultFlat
Primary Color#3F51B5#6200EE#6750a4

​
Best Practices

1

Choose the right blueprint

MD3 for modern apps, MD2 for Material Design compliance, MD1 for classic look.
2

Customize sparingly

Blueprints provide consistency. Only override what’s necessary.
3

Document customizations

Keep track of blueprint overrides in your codebase.
4

Test across components

Blueprint changes affect all components, so test thoroughly.
Blueprints are merged with your configuration. Custom settings take precedence over blueprint defaults.