File tree

docs
- app/components
  - chat
  - content
- content/docs/1.getting-started/5.theme
src
- runtime
  - components
    - prose
- theme
  - content
  - prose
test/components
- __snapshots__
- content/__snapshots__

Original file line number	Diff line number	Diff line change
`@@ -346,11 +346,9 @@ defineShortcuts({`
`346`	`346`	`@submit="onSubmit"`
`347`	`347`	`>`
`348`	`348`	`<template #footer>`
`349`		`-<div class="flex items-center gap-1.5 text-xs text-dimmed">`
`350`		`-<NuxtLink to="https://vercel.com/ai-gateway" target="_blank" class="inline-flex items-center gap-1 hover:text-muted transition-colors">`
`351`		`- Powered by <UIcon name="i-simple-icons-vercel" class="size-3" /> AI Gateway`
`352`		`-</NuxtLink>`
`353`		`-</div>`
	`349`	`+<ULink to="https://vercel.com/ai-gateway" target="_blank" class="inline-flex items-center gap-1 text-xs text-dimmed hover:text-muted">`
	`350`	`+ Powered by <UIcon name="i-simple-icons-vercel" class="size-3" /> AI Gateway`
	`351`	`+</ULink>`
`354`	`352`
`355`	`353`	`<UChatPromptSubmit`
`356`	`354`	`size="sm"`

Original file line number	Diff line number	Diff line change
`@@ -115,9 +115,9 @@ function normalizeCommitMessage(commit: Commit) {`
`115`	`115`	`>`
`116`	`116`	`<template #title="{ item }">`
`117`	`117`	`<UBadge v-if="item.tag === 'unreleased'" color="neutral" variant="subtle" :label="item.title" class="w-12.5 justify-center" />`
`118`		`-<NuxtLink v-else :to="item.url" target="_blank" class="hover:underline">`
	`118`	`+<ULink v-else :to="item.url" target="_blank">`
`119`	`119`	`<UBadge variant="subtle" :label="item.tag" />`
`120`		`-</NuxtLink>`
	`120`	`+</ULink>`
`121`	`121`
`122`	`122`	`<time v-if="item.published_at" :datetime="item.published_at" class="text-xs text-dimmed font-normal">`
`123`	`123`	`{{ useTimeAgo(new Date(item.published_at)) }}`

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ const items = [`
`34`	`34`
`35`	`35`	`<template>`
`36`	`36`	`<UContextMenu :items="items">`
`37`		`-<NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-highlighted min-w-0 focus-visible:outline-primary shrink-0" aria-label="Nuxt UI">`
	`37`	`+<NuxtLink to="/" class="flex items-end gap-2 font-bold text-xl text-highlighted min-w-0 outline-primary/25 focus-visible:outline-3 shrink-0 rounded-md p-1 -ms-1" aria-label="Nuxt UI">`
`38`	`38`	`<Logo ref="logoRef" class="w-auto h-6 shrink-0" />`
`39`	`39`	`</NuxtLink>`
`40`	`40`	`</UContextMenu>`

Original file line number	Diff line number	Diff line change
@@ -288,6 +288,54 @@ You can customize these CSS variables in your `main.css` file:
`288`	`288`	```
`289`	`289`	`::`
`290`	`290`
	`291`	`+## Focus :badge{label="Soon" class="align-text-top"}`
	`292`	`+`
	`293`	+Nuxt UI applies a `focus-visible` outline on every interactive element, tinted with the `color` prop of the component, e.g. `outline-primary/25` when `color="primary"` or `outline-inverted/25` when `color="neutral"`.
	`294`	`+`
	`295`	+If you prefer a single outline color across your entire app regardless of the component color, you can add a global rule in your `main.css` file:
	`296`	`+`
	`297`	`+::code-group`
	`298`	`+`
	`299`	+```css [Primary]
	`300`	`+@import "tailwindcss";`
	`301`	`+@import "@nuxt/ui";`
	`302`	`+`
	`303`	`+*,`
	`304`	`+::before,`
	`305`	`+::after {`
	`306`	`+ @apply outline-primary/25;`
	`307`	`+}`
	`308`	`+`
	`309`	`+*:focus-visible,`
	`310`	`+*:has(> a:focus-visible) {`
	`311`	`+--tw-ring-color: var(--ui-primary);`
	`312`	`+}`
	`313`	+```
	`314`	`+`
	`315`	+```css [Neutral]
	`316`	`+@import "tailwindcss";`
	`317`	`+@import "@nuxt/ui";`
	`318`	`+`
	`319`	`+*,`
	`320`	`+::before,`
	`321`	`+::after {`
	`322`	`+ @apply outline-inverted/25;`
	`323`	`+}`
	`324`	`+`
	`325`	`+*:focus-visible,`
	`326`	`+*:has(> a:focus-visible) {`
	`327`	`+--tw-ring-color: var(--ui-border-inverted);`
	`328`	`+}`
	`329`	+```
	`330`	`+`
	`331`	`+::`
	`332`	`+`
	`333`	+The first rule tints the focus outline of every component, the second one aligns the ring recolor applied on focus by variants with a visible border like `outline` or `subtle`, including cards that highlight when their link is focused.
	`334`	`+`
	`335`	`+::note`
	`336`	+Make sure to declare these rules outside of any `@layer` so they take precedence over the colors set by the component themes. Keep in mind the first rule also tints the native focus outline of your own elements, and variants recoloring a `border` on focus like [FileUpload](/docs/components/file-upload) or [ContentSurround](/docs/components/content-surround) keep following the component `color`.
	`337`	`+::`
	`338`	`+`
`291`	`339`	`## Radius`
`292`	`340`
`293`	`341`	Nuxt UI overrides Tailwind CSS's default `rounded-*` utilities with a unified border radius system, allowing you to use regular [border radius utilities](https://tailwindcss.com/docs/border-radius) like `rounded-xs` or `rounded-2xl`:

Original file line number	Diff line number	Diff line change
`@@ -162,7 +162,6 @@ function onClose() {`
`162`	`162`	`:aria-label="props.title"`
`163`	`163`	`v-bind="{ to: props.to, target: props.target, ...$attrs }"`
`164`	`164`	`:class="prefix('focus:outline-none')"`
`165`		`- tabindex="-1"`
`166`	`165`	`raw`
`167`	`166`	`>`
`168`	`167`	`<span :class="prefix('absolute inset-0')" aria-hidden="true" />`

Original file line number	Diff line number	Diff line change
`@@ -126,6 +126,14 @@ const ariaLabel = computed(() => {`
`126`	`126`
`127`	`127`	`<template>`
`128`	`128`	`<Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">`
	`129`	`+<ULink`
	`130`	`+v-if="props.to"`
	`131`	`+ :aria-label="ariaLabel"`
	`132`	`+v-bind="{ to: props.to, target: props.target, ...$attrs }"`
	`133`	`+ :class="prefix('focus:outline-none absolute inset-0')"`
	`134`	`+ raw`
	`135`	`+ />`
	`136`	`+`
`129`	`137`	`<div v-if="props.image \|\| !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">`
`130`	`138`	`<slot name="header" :ui="ui">`
`131`	`139`	`<component`
`@@ -138,16 +146,6 @@ const ariaLabel = computed(() => {`
`138`	`146`	`</div>`
`139`	`147`
`140`	`148`	`<div data-slot="body" :class="ui.body({ class: props.ui?.body })">`
`141`		`-<ULink`
`142`		`-v-if="props.to"`
`143`		`- :aria-label="ariaLabel"`
`144`		`-v-bind="{ to: props.to, target: props.target, ...$attrs }"`
`145`		`- :class="prefix('focus:outline-none peer')"`
`146`		`- raw`
`147`		`->`
`148`		`-<span :class="prefix('absolute inset-0')" aria-hidden="true" />`
`149`		`-</ULink>`
`150`		`-`
`151`	`149`	`<slot name="body">`
`152`	`150`	`<div v-if="(date \|\| !!slots.date) \|\| (props.badge \|\| !!slots.badge)" data-slot="meta" :class="ui.meta({ class: props.ui?.meta })">`
`153`	`151`	`<slot name="badge">`

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,6 @@ function copyCode() {`
`71`	`71`	`size="sm"`
`72`	`72`	`:aria-label="t('prose.pre.copy')"`
`73`	`73`	`:class="ui.copy({ class: props.ui?.copy })"`
`74`		`- tabindex="-1"`
`75`	`74`	`@click="copyCode"`
`76`	`75`	`/>`
`77`	`76`

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,13 @@`
`5`	`5`	`@variant light (&:where(.light, .light *));`
`6`	`6`	`@variant dark (&:where(.dark, .dark *));`
`7`	`7`
	`8`	`+@layer base {`
	`9`	+/* Chromium applies an `outline-offset` on focused links, reset it so focus outlines hug elements consistently */
	`10`	`+a:focus-visible {`
	`11`	`+outline-offset: 0;`
	`12`	`+ }`
	`13`	`+}`
	`14`	`+`
`8`	`15`	`@layer theme {`
`9`	`16`	`:root, :host {`
`10`	`17`	`--ui-header-height: 4rem;`

Original file line number	Diff line number	Diff line change
`@@ -1,40 +1,48 @@`
`1`	`1`	`@keyframes accordion-up {`
`2`	`2`	`from {`
`3`	`3`	`height: var(--reka-accordion-content-height);`
	`4`	`+overflow: hidden;`
`4`	`5`	`}`
`5`	`6`
`6`	`7`	`to {`
`7`	`8`	`height: 0;`
	`9`	`+overflow: hidden;`
`8`	`10`	`}`
`9`	`11`	`}`
`10`	`12`
`11`	`13`	`@keyframes accordion-down {`
`12`	`14`	`from {`
`13`	`15`	`height: 0;`
	`16`	`+overflow: hidden;`
`14`	`17`	`}`
`15`	`18`
`16`	`19`	`to {`
`17`	`20`	`height: var(--reka-accordion-content-height);`
	`21`	`+overflow: hidden;`
`18`	`22`	`}`
`19`	`23`	`}`
`20`	`24`
`21`	`25`	`@keyframes collapsible-up {`
`22`	`26`	`from {`
`23`	`27`	`height: var(--reka-collapsible-content-height);`
	`28`	`+overflow: hidden;`
`24`	`29`	`}`
`25`	`30`
`26`	`31`	`to {`
`27`	`32`	`height: 0;`
	`33`	`+overflow: hidden;`
`28`	`34`	`}`
`29`	`35`	`}`
`30`	`36`
`31`	`37`	`@keyframes collapsible-down {`
`32`	`38`	`from {`
`33`	`39`	`height: 0;`
	`40`	`+overflow: hidden;`
`34`	`41`	`}`
`35`	`42`
`36`	`43`	`to {`
`37`	`44`	`height: var(--reka-collapsible-content-height);`
	`45`	`+overflow: hidden;`
`38`	`46`	`}`
`39`	`47`	`}`
`40`	`48`

Original file line number	Diff line number	Diff line change
`@@ -3,8 +3,8 @@ export default {`
`3`	`3`	`root: 'w-full',`
`4`	`4`	`item: 'border-b border-default last:border-b-0',`
`5`	`5`	`header: 'flex',`
`6`		`-trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0',`
`7`		`-content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',`
	`6`	`+trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 outline-primary/25 focus-visible:outline-3 min-w-0 rounded-md',`
	`7`	`+content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] data-[state=closed]:overflow-hidden focus:outline-none',`
`8`	`8`	`body: 'text-sm pb-3.5',`
`9`	`9`	`leadingIcon: 'shrink-0 size-5',`
`10`	`10`	`trailingIcon: 'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',`