docs: add @nuxt/ui-pro source (#2775)

2026-01-14 12:14:41 +01:00 · 2024-12-04 21:15:07 +01:00
parent e79103131f
commit 01c3934403
24 changed files with 880 additions and 149 deletions
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -11,6 +11,9 @@ Nuxt UI v3 uses Tailwind CSS v4 beta, you can read the [prerelease documentation

 Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your theme with CSS variables inside a `@theme` directive:

+::module-only
+#ui
+:::div
 ```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -33,6 +36,34 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
  --color-green-950: #052E16;
 }
 ```
+:::
+
+#ui-pro
+:::div
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@theme {
+  --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;
+}
+```
+:::
+::

 The `@theme` directive tells Tailwind to make new utilities and variants available based on these variables. It's the equivalent of the `theme.extend` key in Tailwind CSS v3 `tailwind.config.ts` file.

@@ -46,12 +77,27 @@ You can use the `@source` directive to add explicit content glob patterns if you

 This can be useful when writing Tailwind classes in markdown files with [`@nuxt/content`](https://github.com/nuxt/content):

+::module-only
+#ui
+:::div
 ```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";

@source "../content";
 ```
+:::
+
+#ui-pro
+:::div
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@source "../content";
+```
+:::
+::

 ::note{to="https://tailwindcss.com/docs/v4-beta#adding-content-sources"}
 Learn how to add content sources in Tailwind CSS v4.
@@ -61,12 +107,27 @@ Learn how to add content sources in Tailwind CSS v4.

 You can use the `@plugin` directive to import Tailwind CSS plugins.

+::module-only
+#ui
+:::div
 ```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";

@plugin "@tailwindcss/typography";
 ```
+:::
+
+#ui-pro
+:::div
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@plugin "@tailwindcss/typography";
+```
+:::
+::

 ::note{to="https://tailwindcss.com/docs/v4-beta#using-plugins"}
 Learn more about using plugins in Tailwind CSS v4.
@@ -214,6 +275,9 @@ These color aliases are not automatically defined as Tailwind CSS colors, so cla

 However, you can generate these classes using Tailwind's `@theme` directive, allowing you to use custom color utility classes while maintaining dynamic color aliases:

+::module-only
+#ui
+:::div
 ```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -232,6 +296,31 @@ However, you can generate these classes using Tailwind's `@theme` directive, all
  --color-primary-950: var(--ui-color-primary-950);
 }
 ```
+:::
+
+#ui-pro
+:::div
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@theme {
+  --color-primary-50: var(--ui-color-primary-50);
+  --color-primary-100: var(--ui-color-primary-100);
+  --color-primary-200: var(--ui-color-primary-200);
+  --color-primary-300: var(--ui-color-primary-300);
+  --color-primary-400: var(--ui-color-primary-400);
+  --color-primary-500: var(--ui-color-primary-500);
+  --color-primary-600: var(--ui-color-primary-600);
+  --color-primary-700: var(--ui-color-primary-700);
+  --color-primary-800: var(--ui-color-primary-800);
+  --color-primary-900: var(--ui-color-primary-900);
+  --color-primary-950: var(--ui-color-primary-950);
+}
+```
+:::
+::
+
 ::

 ### Tokens
@@ -275,6 +364,9 @@ You can use these variables in classes like `text-[var(--ui-primary)]`, it will
 ::tip
 You can change which shade is used for each color on light and dark mode:

+::module-only
+#ui
+:::div
 ```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -287,6 +379,25 @@ You can change which shade is used for each color on light and dark mode:
  --ui-primary: var(--ui-color-primary-200);
 }
 ```
+:::
+
+#ui-pro
+:::div
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+:root {
+  --ui-primary: var(--ui-color-primary-700);
+}
+
+.dark {
+  --ui-primary: var(--ui-color-primary-200);
+}
+```
+:::
+::
+
 ::

 #### Neutral Palette
@@ -380,6 +491,9 @@ body {
 ::tip
 You can customize these CSS variables to tailor the appearance of your application:

+::module-only
+#ui
+:::div
 ```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -394,6 +508,27 @@ You can customize these CSS variables to tailor the appearance of your applicati
  --ui-border: var(--ui-color-neutral-900);
 }
 ```
+:::
+
+#ui-pro
+:::div
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+:root {
+  --ui-bg: var(--ui-color-neutral-50);
+  --ui-text: var(--ui-color-neutral-900);
+}
+
+.dark {
+  --ui-bg: var(--ui-color-neutral-950);
+  --ui-border: var(--ui-color-neutral-900);
+}
+```
+:::
+::
+
 ::

 #### Border Radius
@@ -413,6 +548,9 @@ Try the :prose-icon{name="i-lucide-swatch-book" class="text-[var(--ui-primary)]"
 ::tip
 You can customize the default radius value using the default Tailwind CSS variables or a value of your choice:

+::module-only
+#ui
+:::div
 ```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -421,6 +559,21 @@ You can customize the default radius value using the default Tailwind CSS variab
  --ui-radius: var(--radius-sm);
 }
 ```
+:::
+
+#ui-pro
+:::div
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+:root {
+  --ui-radius: var(--radius-sm);
+}
+```
+:::
+::
+
 ::

 #### Container
@@ -436,6 +589,9 @@ Nuxt UI uses a global `--ui-container` CSS variable to define the width of the c
 ::tip
 You can customize the default container width using the default Tailwind CSS variables or a value of your choice:

+::module-only
+#ui
+:::div
 ```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";
@@ -448,6 +604,25 @@ You can customize the default container width using the default Tailwind CSS var
  --ui-container: var(--container-8xl);
 }
 ```
+:::
+
+#ui-pro
+:::div
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui-pro";
+
+@theme {
+  --container-8xl: 90rem;
+}
+
+:root {
+  --ui-container: var(--container-8xl);
+}
+```
+:::
+::
+
 ::

 ## Components theme