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

docs(components): add page (#3365)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sébastien Chopin
2025-02-21 12:15:42 +01:00
committed by GitHub
parent e8c786885b
commit 0a8f49275e
263 changed files with 333 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/app/components/Header.vue
View File

@@ -89,7 +89,7 @@ const items = computed(() => props.links.map(({ icon, ...link }) => link))
<span class="inline-flex items-center gap-0.5">
{{ link.title }}
<sup v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
<sup v-if="link.module === 'ui-pro'" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
</span>
</template>
</UContentNavigation>

5
docs/app/composables/useLinks.ts
View File

@@ -5,12 +5,11 @@ export function useLinks() {
label: 'Docs',
icon: 'i-lucide-square-play',
to: '/getting-started',
active: route.path.startsWith('/getting-started')
active: route.path.startsWith('/getting-started') || route.path.startsWith('/composables/') || (route.path.startsWith('/components/') && route.name !== 'components')
}, {
label: 'Components',
icon: 'i-lucide-square-code',
to: '/components',
active: route.path.startsWith('/components')
to: '/components'
}, {
label: 'Pro',
icon: 'i-lucide-panels-top-left',

6
docs/app/pages/[...slug].vue
View File

@@ -116,11 +116,15 @@ const communityLinks = computed(() => [{
<template>
<UPage v-if="page">
<UPageHeader :title="page.title">
<UPageHeader>
<template #headline>
<UBreadcrumb :items="breadcrumb" />
</template>
<template #title>
{{ page.title }}<sup v-if="page.module === 'ui-pro'" class="text-xs align-super font-medium text-(--ui-primary)">PRO</sup>
</template>
<template #description>
<MDC v-if="page.description" :value="page.description" unwrap="p" />
</template>

140
docs/app/pages/components.vue Normal file
View File

@@ -0,0 +1,140 @@
<script setup lang="ts">
const title = 'Vue Components'
const description = 'Explore 99+ customizable UI components for Vue and Nuxt built with Tailwind CSS and Reka UI.'
useSeoMeta({
titleTemplate: `%s - Nuxt UI`,
title,
description,
ogTitle: `${title} - Nuxt UI`,
ogDescription: description
})
defineOgImageComponent('Docs', {
headline: 'Documentation'
})
const { data: components } = await useAsyncData('components', () => {
return queryCollection('content')
.where('path', 'LIKE', '/components/%')
.where('extension', '=', 'md')
.select('path', 'title', 'description', 'category', 'module')
.all()
})
const componentsPerCategory = computed(() => {
return components.value!.reduce((acc, component) => {
acc[component.category!] = [...(acc[component.category!] || []), component]
return acc
}, {} as Record<string, any[]>)
})
const categories = [{
category: 'layout',
title: 'Layout',
description: 'Structural components for organizing content, including containers, grids, dividers, and responsive layout systems.'
}, {
category: 'form',
title: 'Form',
description: 'Interactive form elements including inputs, selects, checkboxes, radio buttons, and advanced form validation components.'
}, {
category: 'element',
title: 'Element',
description: 'Core UI building blocks like buttons, badges, icons, avatars, and other fundamental interface elements.'
}, {
category: 'data',
title: 'Data',
description: 'Components for displaying and managing data, including tables, lists, cards, data grids, and visualization elements.'
}, {
category: 'navigation',
title: 'Navigation',
description: 'Components for user navigation and wayfinding, including menus, breadcrumbs, pagination, and navigation bars.'
}, {
category: 'overlay',
title: 'Overlay',
description: 'Floating UI elements like modals, dialogs, tooltips, popovers, and other components that overlay the main content.'
}]
</script>
<template>
<UMain>
<UPageHero
description="Build your Vue or Nuxt application faster with Nuxt UI and Nuxt UI Pro components. Powered by Tailwind CSS and Reka UI, delivering responsive and customizable components."
class="relative"
orientation="vertical"
:ui="{ title: 'text-balance' }"
>
<template #headline>
<UButton
to="https://tailwindcss.com"
label="Made with Tailwind CSS v4"
size="md"
variant="subtle"
color="neutral"
icon="i-logos-tailwindcss-icon"
class="rounded-full"
/>
</template>
<template #title>
Build beautiful UI with <span class="text-(--ui-primary)">{{ components!.length }}+</span> powerful components
</template>
<template #links>
<UButton
to="/getting-started/installation/vue"
label="Start with Vue"
icon="i-logos-vue"
color="neutral"
variant="outline"
size="xl"
/>
<UButton
to="/getting-started/installation/nuxt"
label="Start with Nuxt"
icon="i-logos-nuxt-icon"
color="neutral"
variant="outline"
size="xl"
/>
</template>
<template #top>
<div class="absolute z-[-1] rounded-full bg-(--ui-primary) blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
<StarsBg />
</template>
</UPageHero>
<UContainer>
<template v-for="category in categories" :key="category.category">
<UPageHeader :title="category.title" :description="category.description" class="mb-8" />
<UPageGrid class="xl:grid-cols-4 pb-24">
<UPageCard
v-for="(component, index) in componentsPerCategory[category.category]"
:key="component.path"
variant="naked"
:title="component.title"
:description="component.description"
:to="component.path"
:ui="{ wrapper: 'order-last', container: 'lg:flex' }"
>
<template #title>
<div class="flex items-center gap-1.5">
<span>{{ component.title }}</span>
<UBadge v-if="component.module === 'ui-pro'" label="PRO" size="sm" variant="subtle" />
</div>
</template>
<div class="group rounded-[calc(var(--ui-radius)*1.5)] border border-(--ui-border-muted) overflow-hidden aspect-[16/9]">
<UColorModeImage
:light="`${component.path.replace('/components/', '/components/light/')}.png`"
:dark="`${component.path.replace('/components/', '/components/dark/')}.png`"
class="group-hover:scale-105 transition-transform size-full"
:loading="index >= 4 ? 'lazy' : 'eager'"
width="640"
height="360"
/>
</div>
</UPageCard>
</UPageGrid>
</template>
</UContainer>
</UMain>
</template>

21
docs/app/pages/pro/.content/pro.yml
View File

@@ -140,27 +140,6 @@ 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.
items:
- title: Landing
description: A template for building a landing page with Nuxt UI Pro.
icon: i-lucide-layout
to: 'https://landing-template.nuxt.dev/'
image: '/pro/templates/landing.png'
- title: Saas
description: A template for building a SaaS application with Nuxt UI Pro.
icon: i-lucide-cloud
to: 'https://saas-template.nuxt.dev/'
image: '/pro/templates/saas.png'
- title: Docs
description: A template for building a documentation site with Nuxt UI Pro.
icon: i-lucide-book
to: 'https://docs-template.nuxt.dev/'
image: '/pro/templates/docs.png'
- title: Dashboard
description: A template for building a dashboard with Nuxt UI Pro.
icon: i-lucide-chart-bar
to: 'https://dashboard-template.nuxt.dev/'
image: '/pro/templates/dashboard.png'
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.

24
docs/app/pages/pro/.content/templates.yml
View File

@@ -1,7 +1,7 @@
title: Official Nuxt UI Pro Templates
description: 'Ready to use templates powered by our premium Vue components and Nuxt Content. The templates are responsive, accessible and easy to customize so you can get started in no time.'
hero:
title: Official Nuxt UI [Pro]{.text-(--ui-primary)} Templates
title: Ship [in minutes]{.text-(--ui-primary)} with :br Nuxt UI Pro Templates
description: 'Ready to use templates powered by our premium Vue components and Nuxt Content.<br class="hidden lg:block"> The templates are responsive, accessible and easy to customize so you can get started in no time.'
navigation: false
links:
@@ -18,6 +18,7 @@ links:
templates:
- title: 'Landing'
description: "A landing page template you can use as a starting point for your next idea. You can change the content easily in [`content/index.yml`](https://github.com/nuxt-ui-pro/landing/blob/v3/content/index.yml)."
icon: i-lucide-layout
thumbnail:
dark: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2xhbmRpbmctdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjMzNzV9.ja2nUDVOoIFvyaMmg9Jn51uNMoYYt4WA1KWUQBWwUPo.jpg?theme=dark
light: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2xhbmRpbmctdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjMzNzV9.ja2nUDVOoIFvyaMmg9Jn51uNMoYYt4WA1KWUQBWwUPo.jpg?theme=light
@@ -42,6 +43,7 @@ templates:
variant: outline
- title: 'Docs'
description: "A ready-to-use documentation template integrated with [Nuxt Content](https://content.nuxt.com). You can start writing your docs right away inside the [`content/`](https://github.com/nuxt-ui-pro/docs/tree/v3/content) directory."
icon: i-lucide-book
thumbnail:
dark: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RvY3MtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0MTd9.ltVAqPgKG38O01X1zl6MXfrJc55nf9OewXNFjpZ_2JY.jpg?theme=dark
light: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RvY3MtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0MTd9.ltVAqPgKG38O01X1zl6MXfrJc55nf9OewXNFjpZ_2JY.jpg?theme=light
@@ -66,6 +68,10 @@ templates:
color: neutral
- title: 'SaaS'
description: "A fully built SaaS application to launch your next project. It includes a landing page, a pricing page, a documentation and a blog which can customized easily from the `content/` directory."
icon: i-lucide-cloud
thumbnail:
dark: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3NhYXMtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0NDh9.tgzUQaw6XswUPPVbOXazuWwoTHJODg155CYt1xfzIdM.jpg?theme=dark
light: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL3NhYXMtdGVtcGxhdGUubnV4dC5kZXYiLCJpYXQiOjE3Mzk0NjM0NDh9.tgzUQaw6XswUPPVbOXazuWwoTHJODg155CYt1xfzIdM.jpg?theme=light
features:
- title: Includes Landing & Docs sections
icon: i-lucide-grid-2x2-plus
@@ -74,21 +80,23 @@ templates:
- title: Authentication pages (login, register)
icon: i-lucide-user-round-check
links:
- label: Live preview (soon)
- label: Live preview
to: https://saas-template.nuxt.dev
target: _blank
trailingIcon: i-lucide-arrow-up-right
color: neutral
disabled: true
- label: Use this template (soon)
- label: Use this template
to: https://github.com/nuxt-ui-pro/saas/tree/v3
target: _blank
variant: outline
icon: i-simple-icons-github
color: neutral
disabled: true
- title: 'Dashboard'
description: "A template to illustrate how to build your own dashboard with the 15+ latest Nuxt UI Pro components, designed specifically to create a consistent look and feel."
icon: i-lucide-bar-chart-big
thumbnail:
dark: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2Rhc2hib2FyZC10ZW1wbGF0ZS5udXh0LmRldiIsImlhdCI6MTczOTQ2MzU2N30._VElt4uvLjvAMdnTLytCInOajMElzWDKbmvOaMZhZUI.jpg?theme=dark
light: https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2Rhc2hib2FyZC10ZW1wbGF0ZS5udXh0LmRldiIsImlhdCI6MTczOTQ2MzU2N30._VElt4uvLjvAMdnTLytCInOajMElzWDKbmvOaMZhZUI.jpg?theme=light
features:
- title: Mix with SaaS template for a complete solution
icon: i-lucide-puzzle
@@ -97,16 +105,14 @@ templates:
- title: Resizable multi-column layout
icon: i-lucide-columns-3
links:
- label: Live preview (soon)
- label: Live preview
to: https://dashboard-template.nuxt.dev
target: _blank
trailingIcon: i-lucide-arrow-up-right
color: neutral
disabled: true
- label: Use this template (soon)
- label: Use this template
to: https://github.com/nuxt-ui-pro/dashboard/tree/v3
target: _blank
icon: i-simple-icons-github
color: neutral
variant: outline
disabled: true

18
docs/app/pages/pro/index.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts">
// @ts-expect-error yaml is not typed
import page from '.content/pro.yml'
// @ts-expect-error yaml is not typed
import templatesPage from '.content/templates.yml'
useSeoMeta({
title: page.title,
@@ -72,12 +74,13 @@ defineOgImageComponent('Docs', {
arrows
dots
:autoplay="{ delay: 3000 }"
:items="(page.templates.items as any[])"
:items="(templatesPage.templates as any[])"
:ui="{ item: 'basis-1/2', container: 'py-2' }"
>
<UPageCard
:to="item.to"
:description="item.description"
:to="item.links[0].to"
target="_blank"
variant="subtle"
class="group"
:ui="{ container: 'p-4 sm:p-4', title: 'flex items-center gap-1' }"
>
@@ -87,11 +90,12 @@ defineOgImageComponent('Docs', {
{{ item.title }}
</span>
</template>
<img
:src="item.image"
<UColorModeImage
:light="item.thumbnail.light"
:dark="item.thumbnail.dark"
:alt="item.title"
class="rounded-lg grayscale group-hover:grayscale-0 transition-all duration-200 ease-in-out"
>
class="rounded-lg w-full border border-(--ui-border)"
/>
</UPageCard>
</UCarousel>
</UPageSection>