mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-20 15:01:46 +01:00
165 lines
8.0 KiB
YAML
165 lines
8.0 KiB
YAML
title: Build faster with Nuxt UI Pro.
|
||
description: A collection of premium Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your application.
|
||
hero:
|
||
title: Build faster with Nuxt UI [Pro]{class="text-(--ui-primary)"}.
|
||
description: A collection of premium Vue components, composables and utils built on top of Nuxt UI. :br Focused on structure and layout, these [responsive components]{class="text-(--ui-text)"} are designed to be the perfect [building blocks for your next idea]{class="text-(--ui-text)"}.
|
||
links:
|
||
- label: Buy a license
|
||
size: xl
|
||
to: /pro/pricing
|
||
- label: Try for free
|
||
trailing: true
|
||
color: neutral
|
||
variant: outline
|
||
to: /getting-started/installation/pro/nuxt
|
||
size: xl
|
||
trailingIcon: i-lucide-arrow-right
|
||
features:
|
||
title: Create stunning Vue applications faster.
|
||
description: Nuxt UI Pro comes packed with powerful features to help you build modern, performant, accessible and responsive Nuxt applications at record speed. From pre-built UI sections to Figma design kits, every detail is crafted to speed up your development and deliver a polished user experience.
|
||
features:
|
||
- title: 40+ Ready-to-use Sections
|
||
description: Pre-built UI components for landing pages, documentation, blogs, dashboards, and more—ready to use out of the box.
|
||
icon: i-lucide-layout-grid
|
||
- title: Auto Dark Mode
|
||
description: Seamlessly adapts to user preferences with a built-in dark mode switch—no extra configuration needed.
|
||
icon: i-lucide-moon
|
||
- title: Blazing-fast Performance
|
||
description: Optimized for Nuxt 3 with minimal bundle size, lightning-fast rendering, and best practices in performance.
|
||
icon: i-lucide-zap
|
||
- title: SEO & Accessibility Ready
|
||
description: Built with proper semantic HTML, structured data, and accessibility in mind for better rankings and usability.
|
||
icon: i-lucide-search-check
|
||
- title: Fully Customizable UI
|
||
description: Modify colors, fonts, spacing, and layouts with Tailwind CSS and Nuxt UI’s design tokens to match your brand identity.
|
||
icon: i-lucide-settings-2
|
||
- title: Nuxt Content Support
|
||
description: Write content with Markdown and MDC, making it easy to build documentation, blogs, and knowledge bases.
|
||
icon: i-simple-icons-markdown
|
||
- title: Vue-only mode
|
||
description: Enjoy the benefits of Nuxt UI Pro without Nuxt. Integrate it seamlessly into your Vue 3 + Vite projects and build modern UIs with ease.
|
||
icon: i-simple-icons-vuedotjs
|
||
- title: Built-in Internationalization (i18n)
|
||
description: Easily localize your site with built-in support for multiple languages and right-to-left (RTL) layouts.
|
||
icon: i-lucide-globe
|
||
- title: Figma Design Kits
|
||
description: Match your development workflow with Nuxt UI & UI Pro Figma UI kits, ensuring a fast transition from design to code.
|
||
icon: i-simple-icons-figma
|
||
testimonial:
|
||
quote: Nuxt UI has allowed me to develop my SaaS without any prior mockups. The design quality of their components and the intelligence of the DX meant that I was able to try many different layouts for my application until I found the perfect UX for my users. Nuxt UI is the ui-kit I would have dreamed of building myself, and Nuxt UI Pro makes things even easier when you want to go further with your SaaS. Kudos to the team.
|
||
user:
|
||
name: Benjamin Code
|
||
description: YouTuber and Founder
|
||
to: https://x.com/benjamincode
|
||
avatar:
|
||
src: https://pbs.twimg.com/profile_images/1607353032420769793/I8qQSUfQ_400x400.jpg
|
||
# authorQuote:
|
||
# quote: Nuxt UI, born from a desire to improve Vue component development, is the go-to library for building modern web interfaces. We aim to provide you with a comprehensive set of tools to create and customize your next UI while maintaining the best developer experience.
|
||
# user:
|
||
# name: Benjamin Canac
|
||
# description: Author of Nuxt UI
|
||
# to: https://github.com/benjamincanac
|
||
# avatar:
|
||
# src: https://github.com/benjamincanac.png
|
||
mainSection:
|
||
title: Meet the [Pro Components]{class="text-(--ui-primary)"}.
|
||
description: Code with 50+ components and sections of Nuxt UI Pro to build your next application by reducing the amount of code you need to write.
|
||
sections:
|
||
- title: The freedom to build anything
|
||
description: Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility.
|
||
id: features
|
||
reverse: true
|
||
features:
|
||
- name: Fully customizable
|
||
description: Like Nuxt UI, change the style of any component from your App Config or customize them specifically through the ui prop.
|
||
icon: i-lucide-pencil-ruler
|
||
- name: Slots for everything
|
||
description: Each component leverages the power of Vue's slots to give you the flexibility to build anything.
|
||
icon: i-lucide-code
|
||
- name: Responsive by design
|
||
description: Nuxt UI Pro components aims to structure your content, they are responsive by design and will adapt to any screen size.
|
||
icon: i-lucide-layout
|
||
links:
|
||
- label: Explore components
|
||
to: /components
|
||
trailingIcon: i-lucide-arrow-right
|
||
code: |
|
||
```vue [app.vue]
|
||
<script setup lang="ts">
|
||
const links = [
|
||
{ to: '/', label: 'Home' },
|
||
{ to: '/about', label: 'About' },
|
||
{ to: '/contact', label: 'Contact' }
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<UApp>
|
||
<UHeader :links="links" />
|
||
|
||
<UPageHero title="Hello World" />
|
||
|
||
<UPageSection title="Features">
|
||
<UPageGrid>
|
||
<UPageCard title="First Card" />
|
||
<UPageCard title="Second Card" />
|
||
<UPageCard title="Third Card" />
|
||
</UPageGrid>
|
||
</UPageSection>
|
||
|
||
<UFooter />
|
||
</UApp>
|
||
</template>
|
||
```
|
||
- title: The flexibility to display your data
|
||
description: Although you can use any data source you want, Nuxt UI Pro is fully integrated with Nuxt Content and provides additional features when the module is detected.
|
||
features:
|
||
- name: 'Write Markdown with ease'
|
||
description: Nuxt UI Pro overrides Nuxt Content prose components to make them awesome but also adds new ones like Callout, CodeGroup, Field, etc.
|
||
icon: i-simple-icons-markdown
|
||
- name: Full-Text Search out of the box
|
||
description: 'Nuxt UI Pro ships with a ready to use command palette component. No need to setup Algolia DocSearch anymore.'
|
||
icon: i-lucide-search
|
||
links:
|
||
- label: Nuxt Content Integration
|
||
to: /getting-started/content
|
||
icon: i-lucide-arrow-right
|
||
trailing: true
|
||
code: |
|
||
```vue [pages/\[...slug\\].vue]
|
||
<script setup lang="ts">
|
||
const route = useRoute()
|
||
|
||
const { data: page } = await useAsyncData(route.path, () => queryCollection('content').path(route.path).first())
|
||
</script>
|
||
|
||
<template>
|
||
<UPage>
|
||
<UPageHeader :title="page.title" :description="page.description" :links="page.links" />
|
||
|
||
<UPageBody>
|
||
<ContentRenderer v-if="page.body" :value="page" />
|
||
</UPageBody>
|
||
|
||
<template #right>
|
||
<UContentToc :links="page.body.toc.links" />
|
||
</template>
|
||
</UPage>
|
||
</template>
|
||
```
|
||
templates:
|
||
headline: Templates
|
||
title: Kickstart with Nuxt UI Pro in seconds
|
||
description: Choose from a variety of templates to get started with Nuxt UI Pro in seconds. Each template is designed to help you build beautiful and responsive Nuxt applications in minutes.
|
||
cta:
|
||
title: Start with Nuxt UI Pro today!
|
||
description: Nuxt UI Pro is free in development, but you need a license to use it in production.
|
||
links:
|
||
- label: Buy a license
|
||
to: '/pro/pricing'
|
||
- label: Try for free
|
||
to: /getting-started/installation/pro/nuxt
|
||
variant: outline
|
||
color: neutral
|
||
trailingIcon: i-lucide-arrow-right
|