mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
183 lines
6.9 KiB
YAML
183 lines
6.9 KiB
YAML
title: The Intuitive Vue UI Library
|
|
description: Create beautiful, responsive & accessible web apps quickly with Vue or Nuxt. Nuxt UI is an open-source UI library of 50+ customizable components built with Tailwind CSS and Reka UI.
|
|
hero:
|
|
title: The Intuitive Vue UI Library
|
|
description: Create beautiful, responsive & accessible web apps quickly with Vue or Nuxt. Nuxt UI is an open-source UI library of 50+ customizable components built with Tailwind CSS and Reka UI.
|
|
links:
|
|
- label: Get started
|
|
to: /getting-started/installation/nuxt
|
|
class: 'ui-only nuxt-only'
|
|
- label: Get started
|
|
to: /getting-started/installation/vue
|
|
class: 'ui-only vue-only'
|
|
- label: Get started
|
|
to: /getting-started/installation/pro/nuxt
|
|
class: 'ui-pro-only nuxt-only'
|
|
- label: Get started
|
|
to: /getting-started/installation/pro/vue
|
|
class: 'ui-pro-only vue-only'
|
|
- label: Explore components
|
|
to: /components
|
|
variant: outline
|
|
color: neutral
|
|
trailingIcon: i-lucide-arrow-right
|
|
features:
|
|
- icon: i-logos-tailwindcss-icon
|
|
title: Styled with Tailwind CSS v4
|
|
description: Beautifully styled by default, overwrite any style you want.
|
|
- icon: i-custom-reka-ui
|
|
title: Accessible with Reka UI
|
|
description: Robust accessibility out of the box.
|
|
- icon: i-logos-typescript-icon
|
|
title: Type-safe with TypeScript
|
|
description: Auto-complete and type safety for all components.
|
|
features:
|
|
- title: Build for the modern web
|
|
description: Powered by Tailwind CSS v4 and Reka UI for top performance and accessibility.
|
|
icon: i-lucide-rocket
|
|
to: /getting-started
|
|
- title: Flexible design system
|
|
description: Beautiful by default and easily customizable with design tokens to your brand.
|
|
icon: i-lucide-swatch-book
|
|
to: /getting-started/theme#design-system
|
|
- title: Internationalization (i18n)
|
|
description: Nuxt UI is translated into 30+ languages, works well with i18n and multi-directional support (LTR/RTL).
|
|
icon: i-lucide-globe
|
|
to: /getting-started/i18n/nuxt
|
|
- title: Easy font customization
|
|
description: Performance-optimized fonts with first-class @nuxt/fonts integration.
|
|
icon: i-lucide-a-large-small
|
|
to: /getting-started/fonts
|
|
- title: Large icons sets
|
|
description: Access to over 200,000 customizable icons from Iconify, seamlessly integrated with Iconify.
|
|
icon: i-lucide-smile
|
|
to: /getting-started/icons
|
|
- title: Light & Dark
|
|
description: Dark mode-ready components, seamless integration with @nuxtjs/color-mode.
|
|
icon: i-lucide-sun-moon
|
|
to: /getting-started/color-mode/nuxt
|
|
design_system:
|
|
title: Flexible design system
|
|
description: Build your next project faster with Nuxt UI's comprehensive design system. Featuring semantic color aliases, comprehensive design tokens, and automatic light/dark mode support for accessible components out of the box.
|
|
links:
|
|
- label: Customize design system
|
|
to: /getting-started/theme#design-system
|
|
variant: outline
|
|
color: neutral
|
|
trailingIcon: i-lucide-arrow-right
|
|
features:
|
|
- title: Color aliases via AppConfig
|
|
description: Configure 7 semantic color aliases (primary, secondary, success, info, warning, error, neutral) at runtime through AppConfig without rebuilding your application
|
|
icon: i-lucide-palette
|
|
- title: Comprehensive design tokens
|
|
description: Extensive set of neutral palette tokens for text, backgrounds, and borders with automatic light/dark mode support via CSS variables like --ui-text, --ui-bg, --ui-border
|
|
icon: i-lucide-component
|
|
- title: Global style variables
|
|
description: Customize global styling with --ui-radius for consistent border rounding and --ui-container for layout widths across your entire application
|
|
icon: i-lucide-ruler
|
|
code: |
|
|
::code-group
|
|
|
|
```ts [app.config.ts]
|
|
export default defineAppConfig({
|
|
ui: {
|
|
colors: {
|
|
primary: 'indigo',
|
|
secondary: 'pink',
|
|
success: 'green',
|
|
info: 'blue',
|
|
warning: 'orange',
|
|
error: 'red',
|
|
neutral: 'zinc'
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
```
|
|
|
|
```css [main.css]
|
|
@import "tailwindcss";
|
|
@import "@nuxt/ui";
|
|
|
|
:root {
|
|
--ui-radius: var(--radius-sm);
|
|
--ui-container: 90rem;
|
|
--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);
|
|
}
|
|
```
|
|
|
|
::
|
|
component_customization:
|
|
title: Powerful component customization
|
|
description: Nuxt UI leverages [Tailwind Variants](https://www.tailwind-variants.org/) to provide a powerful, maintainable system for managing component styles and intelligently merging Tailwind CSS classes without conflicts.
|
|
links:
|
|
- label: Customize components
|
|
to: /getting-started/theme#customize-theme
|
|
variant: outline
|
|
color: neutral
|
|
trailingIcon: i-lucide-arrow-right
|
|
features:
|
|
- title: Powerful slot and variant system
|
|
description: Customize component parts with slots and apply different styles based on props, creating consistent UI patterns with granular control over styling
|
|
icon: i-lucide-layout-grid
|
|
- title: Global theme with AppConfig
|
|
description: Configure component styles project-wide with a centralized AppConfig that maintains consistency across your application without rebuilding
|
|
icon: i-lucide-settings-2
|
|
- title: Per-component customization
|
|
description: Fine-tune individual components with the ui prop for slot-specific styling and class prop for root element overrides, providing maximum flexibility
|
|
icon: i-lucide-component
|
|
code: |
|
|
::code-group
|
|
|
|
```ts [app.config.ts]
|
|
export default defineAppConfig({
|
|
ui: {
|
|
button: {
|
|
slots: {
|
|
base: 'group font-bold',
|
|
trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
|
|
},
|
|
defaultVariants: {
|
|
color: 'neutral',
|
|
variant: 'subtle'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
```vue [Collapsible.vue]
|
|
<template>
|
|
<UCollapsible>
|
|
<UButton
|
|
label="Open"
|
|
color="neutral"
|
|
variant="subtle"
|
|
trailing-icon="i-lucide-chevron-down"
|
|
:ui="{
|
|
trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
|
|
}"
|
|
class="group font-bold"
|
|
/>
|
|
</UCollapsible>
|
|
</template>
|
|
```
|
|
|
|
::
|
|
community:
|
|
title: Nuxt UI open-source community
|
|
description: Join our thriving community to contribute code, report issues, suggest features, or help with documentation. Every contribution makes Nuxt UI better for everyone.
|
|
links:
|
|
- label: Star on GitHub
|
|
color: neutral
|
|
variant: outline
|
|
to: https://github.com/nuxt/ui
|
|
target: _blank
|
|
icon: i-lucide-star
|