Installation
Oxide UI components are plain Tailwind CSS HTML. The only prerequisite is a working Tailwind CSS setup inside your Nuxt project.
1. Create a Nuxt project
bash
npx nuxi@latest init my-app
cd my-app2. Install Tailwind CSS
Use the official Nuxt Tailwind module — the easiest integration path:
bash
npm install --save-dev @nuxtjs/tailwindcssAdd it to nuxt.config.ts:
ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss'],
})The module auto-detects your content paths, so no manual content config is needed.
3. Create your Tailwind config
bash
npx tailwindcss initjs
// tailwind.config.js
export default {
darkMode: 'class',
theme: {
extend: {
colors: {
oxide: {
DEFAULT: '#D40C37',
hover: '#e8103f',
soft: 'rgba(212, 12, 55, 0.10)',
},
},
},
},
}4. Force dark mode
Since Oxide UI is dark-only, add the dark class to your <html> element in app.vue:
vue
<!-- app.vue -->
<template>
<Html class="dark">
<NuxtPage />
</Html>
</template>Or set it globally using a Nuxt plugin:
ts
// plugins/dark-mode.client.ts
export default defineNuxtPlugin(() => {
document.documentElement.classList.add('dark')
})5. Copy a component
Browse to any component page, copy the HTML, and paste it into a .vue file. Example:
vue
<!-- components/AppButton.vue -->
<template>
<button
class="inline-flex items-center justify-center gap-2 rounded-md bg-[#D40C37] px-4 py-2 text-sm font-medium text-white transition-all hover:bg-[#b50a2f] active:scale-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#D40C37]/50"
>
<slot />
</button>
</template>Fonts (optional)
Oxide UI's docs use Syne for headings, DM Sans for body text, and JetBrains Mono for code. Add them via the Nuxt Google Fonts module:
bash
npm install --save-dev @nuxtjs/google-fontsts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts'],
googleFonts: {
families: {
Syne: [400, 700, 800],
'DM Sans': [300, 400, 500, 600],
'JetBrains Mono': [400, 500],
},
display: 'swap',
},
})Then reference them in your Tailwind config:
js
extend: {
fontFamily: {
display: ['Syne', 'sans-serif'],
body: ['DM Sans', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
}