Oct 15, 2025-8 MIN READ

Nuxt UI Prose Samples

Разбираем путь создания кастомного iOS-курсор-эффекта на Nuxt 4 с Motion One, все баги, глитчи и архитектурные решения

Антон Бушин

Accordion

Yes! While optimized for Nuxt, Nuxt UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the installation guide to get started.

Badge

v4.0.0

Callout

Here's some additional information.

Here's a helpful suggestion.

Be careful with this action as it might have unexpected results.

This action cannot be undone.

Card

Startup

Best suited for small teams, startups and agencies with up to 5 developers.

Card Group

Dashboard

A dashboard with multi-column layout.

SaaS

A template with landing, pricing, docs and blog.

Docs

A documentation with @nuxt/content.

Landing

A landing page you can use as starting point.

Code Collapse

main.css

@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

code-group

pnpm add @nuxt/ui

yarn add @nuxt/ui

npm install @nuxt/ui

bun add @nuxt/ui

code-tree

app/app.config.ts

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
})

collapsible

Prop	Default	Type
`name`		`string`
`size`	`md`	`string`
`color`	`neutral`	`string`

field

someFieldName

string required

The description can be set as prop or in the default slot with full markdown support.

field-group

analytics

boolean required

Default to false - Enables analytics for your project (coming soon).

blob

boolean

Default to false - Enables blob storage to store static assets, such as images, videos and more.

cache

boolean

Default to false - Enables cache storage to cache your server route responses or functions using Nitro's cachedEventHandler and cachedFunction

database

boolean

Default to false - Enables SQL database to store your application's data.

steps

Add the Nuxt UI module in your `nuxt.config.ts`

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

Import Tailwind CSS in your CSS

assets/css/main.css

@import "tailwindcss";

Start your development server

npm run dev

tabs

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

Как я улучшал свой сайт на Nuxt 4

Опыт по настройке резюме, блога и кастомизации темизации PrimeVue и Tailwind.

DraftPointer

Как мы две недели делали идеальный кастомный курсор — и почему это было зря Введение