Code Blocks

Basic

Code blocks should be easy to scan in both light and dark color modes.

tsts

export default defineNuxtConfig({
  modules: ['shadcn-nuxt'],
})

Filenames help readers understand where a snippet belongs in the project.

nuxt.config.tsts

export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  modules: ['@nuxt/icon', 'shadcn-nuxt'],
})

app/assets/css/main.csscss

@import "tailwindcss";

@layer base {
  body {
    @apply bg-background text-foreground;
  }
}

Grouped install commands can be represented as adjacent examples when a full tab component is not needed.

Customize locally

Copy buttons and stateful tabs can be added later without changing the page structure shown here.

pnpmbash

pnpm dlx shadcn-vue@latest add button

npmbash

npx shadcn-vue@latest add button