arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(module): dynamic rounded-* utilities (#3906)

Browse Source
This commit is contained in:
Benjamin Canac
2025-04-16 15:57:32 +02:00
committed by GitHub
parent 4e39cc59f8
commit f9737c8f40
109 changed files with 6247 additions and 6245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/content/1.getting-started/1.index.md
View File

@@ -4,7 +4,7 @@ description: 'Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS,
navigation.icon: i-lucide-house
---
<iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;" class="rounded-[calc(var(--ui-radius)*1.5)]"></iframe>
<iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;" class="rounded-md"></iframe>
## Reka UI

94
docs/content/1.getting-started/3.theme.md
View File

@@ -605,65 +605,61 @@ You can customize these CSS variables to tailor the appearance of your applicati
#### Border Radius
Nuxt UI uses a global `--ui-radius` CSS variable for consistent border rounding. Components use variations of this base value, like `rounded-[calc(var(--ui-radius)*2)]`, to create different levels of roundness throughout the UI:
Nuxt UI provides a centralized border radius system through the `--ui-radius` CSS variable, which defaults to `0.25rem`. This system replaces Tailwind CSS's default `rounded-*` utilities while maintaining the familiar class names. The border radius system is built on a scale that multiplies the base radius value:
```css
:root {
--ui-radius: var(--radius-sm);
@theme default {
--radius-xs: calc(var(--ui-radius) * 0.5); /* 0.125rem */
--radius-sm: var(--ui-radius); /* 0.25rem */
--radius-md: calc(var(--ui-radius) * 1.5); /* 0.375rem */
--radius-lg: calc(var(--ui-radius) * 2); /* 0.5rem */
--radius-xl: calc(var(--ui-radius) * 3); /* 0.75rem */
--radius-2xl: calc(var(--ui-radius) * 4); /* 1rem */
--radius-3xl: calc(var(--ui-radius) * 6); /* 1.5rem */
}
```
You can customize the base radius value in your `main.css` file:
::module-only
#ui
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-radius: 0.5rem;
}
```
:::
#ui-pro
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
:root {
--ui-radius: 0.5rem;
}
```
:::
::
::note
Try the :prose-icon{name="i-lucide-swatch-book" class="text-(--ui-primary)"} theme picker in the header above to change the base radius value.
::
::tip
You can customize the default radius value using the default Tailwind CSS variables or a value of your choice:
::module-only
#ui
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-radius: var(--radius-sm);
}
```
:::
#ui-pro
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
:root {
--ui-radius: var(--radius-sm);
}
```
:::
::
::
#### Container
Nuxt UI uses a global `--ui-container` CSS variable to define the width of the container:
Nuxt UI provides a global `--ui-container` CSS variable that controls the maximum width of the [Container](/components/container) component, which defaults to `var(--container-7xl)`.
```css
:root {
--ui-container: var(--container-7xl);
}
```
::tip
You can customize the default container width using the default Tailwind CSS variables or a value of your choice:
You can customize this value in your `main.css` file to adjust container widths consistently throughout your application:
::module-only
#ui
@@ -703,8 +699,6 @@ You can customize the default container width using the default Tailwind CSS var
:::
::
::
## Components theme
Nuxt UI components are styled using the [Tailwind Variants](https://www.tailwind-variants.org/) API, which provides a powerful way to create variants and manage component styles. Let's explore the key features of this API:
@@ -718,7 +712,7 @@ Components in Nuxt UI can have multiple `slots`, each representing a distinct HT
```ts [src/theme/card.ts]
export default {
slots: {
root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]',
root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-lg',
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'