mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
197 lines
8.2 KiB
YAML
197 lines
8.2 KiB
YAML
navigation: false
|
|
title: 'Nuxt UI: A UI Library for Modern Web Apps'
|
|
description: 'It provides everything related to UI when building your Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts. Built with Headless UI and Tailwind CSS, published under MIT License.'
|
|
hero:
|
|
title: 'A <span class="text-primary">UI Library</span> for<br class="hidden lg:block"> Modern Web Apps'
|
|
description: 'Nuxt UI simplifies the creation of stunning and responsive web applications with its<br class="hidden lg:block"> comprehensive collection of fully styled and customizable UI components designed for Nuxt.'
|
|
sections:
|
|
- slot: demo
|
|
class: 'hidden lg:block dark:bg-gradient-to-b from-gray-900 to-gray-950/50 !pt-12'
|
|
- title: Everything you expect from a<br class="hidden lg:block"> <span class="text-primary">UI component library</span>
|
|
slot: features
|
|
class: 'dark:bg-gradient-to-b from-gray-900 to-gray-950/50 dark:lg:bg-none dark:lg:bg-gray-950/50'
|
|
cards:
|
|
- title: Color Palette
|
|
description: 'Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly.'
|
|
icon: i-heroicons-swatch
|
|
to: /getting-started/theming#colors
|
|
class: 'col-span-7 row-span-3'
|
|
image:
|
|
path: /illustrations/color-palette
|
|
width: 363
|
|
height: 152
|
|
orientation: 'horizontal'
|
|
- title: Fully Customizable
|
|
description: 'Change the style of any component in your App Config or customize them specifically through the ui prop.'
|
|
icon: i-heroicons-wrench-screwdriver
|
|
to: /getting-started/theming#components
|
|
image:
|
|
path: /illustrations/fully-customizable
|
|
width: 444
|
|
height: 160
|
|
class: 'col-span-5 row-span-5 lg:mb-10'
|
|
orientation: 'vertical'
|
|
- title: Icons
|
|
description: 'Choose any of the 100k+ icons from the most popular icon libraries with the Icon component or the icon prop.'
|
|
icon: i-heroicons-face-smile
|
|
to: /getting-started/theming#icons
|
|
image:
|
|
path: /illustrations/icon-library
|
|
width: 362
|
|
height: 184
|
|
class: 'col-span-7 row-span-3'
|
|
orientation: 'horizontal'
|
|
- title: Light & Dark
|
|
description: 'Every component is designed with dark mode in mind. Works out of the box with @nuxtjs/color-mode.'
|
|
to: /getting-started/theming#dark-mode
|
|
icon: i-heroicons-moon
|
|
image:
|
|
path: /illustrations/dark-mode
|
|
width: 444
|
|
height: 160
|
|
class: 'col-span-5 row-span-5 lg:-mt-10 lg:mb-20'
|
|
orientation: 'vertical'
|
|
- title: Keyboard Shortcuts
|
|
description: 'Nuxt UI comes with a set of Vue composables to easily handle keyboard shortcuts in your app.'
|
|
icon: i-heroicons-computer-desktop
|
|
to: /getting-started/shortcuts
|
|
class: 'col-span-7 row-span-3'
|
|
image:
|
|
path: /illustrations/keyboard-shortcuts
|
|
width: 444
|
|
height: 160
|
|
orientation: 'horizontal'
|
|
links:
|
|
- label: Explore 40+ components
|
|
to: /components
|
|
color: black
|
|
size: lg
|
|
icon: i-heroicons-cube
|
|
cta:
|
|
title: Built and driven by an <span class="text-primary">amazing community</span>
|
|
align: center
|
|
users:
|
|
- name: Benjamin Canac
|
|
username: benjamincanac
|
|
to: https://twitter.com/benjamincanac
|
|
- name: Romain Hamel
|
|
username: romhml
|
|
to: https://github.com/romhml
|
|
- name: Neil Richter
|
|
username: noook
|
|
to: https://nook.sh/
|
|
pro:
|
|
title: Upgrade to <span class="text-primary">Nuxt UI Pro</span>
|
|
description: 'Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.'
|
|
links:
|
|
- label: Buy now
|
|
to: /pro/pricing
|
|
color: black
|
|
trailingIcon: i-heroicons-arrow-right-20-solid
|
|
size: lg
|
|
- label: Explore templates
|
|
to: /pro/templates
|
|
color: gray
|
|
icon: i-heroicons-computer-desktop
|
|
size: lg
|
|
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
|
|
align: left
|
|
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-heroicons-wrench-screwdriver
|
|
- name: Slots for everything
|
|
description: Each component leverages the power of Vue's slots to give you the flexibility to build anything.
|
|
icon: i-heroicons-square-3-stack-3d
|
|
- 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-heroicons-device-phone-mobile
|
|
links:
|
|
- label: Explore components
|
|
to: /pro/components
|
|
color: gray
|
|
icon: i-heroicons-arrow-right-20-solid
|
|
trailing: true
|
|
size: md
|
|
class: ml-8
|
|
code: |
|
|
```vue [app.vue]
|
|
<script setup lang="ts">
|
|
const links = [
|
|
{ to: '/', label: 'Home' },
|
|
{ to: '/about', label: 'About' },
|
|
{ to: '/contact', label: 'Contact' }
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<UHeader :links="links" />
|
|
|
|
<UMain>
|
|
<ULandingHero title="Hello World" />
|
|
|
|
<ULandingSection title="Features">
|
|
<UPageGrid>
|
|
<ULandingCard title="First Card" />
|
|
<ULandingCard title="Second Card" />
|
|
<ULandingCard title="Third Card" />
|
|
</UPageGrid>
|
|
</ULandingSection>
|
|
</UMain>
|
|
|
|
<UFooter />
|
|
</template>
|
|
```
|
|
- title: The flexibility to control 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.
|
|
align: right
|
|
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: 'Beautiful Typography styles'
|
|
description: Tailwind CSS typography plugin is pre-configured and styled to match Nuxt UI components and colors.
|
|
icon: i-heroicons-paint-brush
|
|
- 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-heroicons-magnifying-glass
|
|
links:
|
|
- label: Nuxt Content integration
|
|
to: /pro/getting-started/content
|
|
color: gray
|
|
icon: i-heroicons-arrow-right-20-solid
|
|
trailing: true
|
|
size: md
|
|
class: ml-8
|
|
code: |
|
|
```vue [pages/\[...slug\\].vue]
|
|
<script setup lang="ts">
|
|
const route = useRoute()
|
|
|
|
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
|
|
</script>
|
|
|
|
<template>
|
|
<UPage>
|
|
<UPageHeader :title="page.title" :description="page.description" :links="page.links" />
|
|
|
|
<UPageBody prose>
|
|
<ContentRenderer v-if="page.body" :value="page" />
|
|
</UPageBody>
|
|
|
|
<template #right>
|
|
<UContentToc :links="page.body.toc.links" />
|
|
</template>
|
|
</UPage>
|
|
</template>
|
|
```
|
|
landing:
|
|
title: Start with a landing page
|
|
description: Stop wasting time building another landing page, Nuxt UI Pro flexible components will allow you to focus on your content.
|
|
docs:
|
|
title: Build your docs in seconds
|
|
description: Whether you're creating documentation for your open source project or explaining your product, Nuxt UI Pro has you covered.
|