diff --git a/apps/www/.vitepress/theme/components/theming/utils/data.ts b/apps/www/.vitepress/theme/components/theming/utils/data.ts
index 3da4424d..41166bad 100644
--- a/apps/www/.vitepress/theme/components/theming/utils/data.ts
+++ b/apps/www/.vitepress/theme/components/theming/utils/data.ts
@@ -2,11 +2,41 @@ import { CreditCard } from 'lucide-vue-next'
import RiAppleFill from '~icons/ri/apple-fill'
import RiPaypalFill from '~icons/ri/paypal-fill'
-interface Payment {
- status: string
- email: string
- amount: number
-}
+type Color =
+ | 'zinc'
+ | 'slate'
+ | 'stone'
+ | 'gray'
+ | 'neutral'
+ | 'red'
+ | 'rose'
+ | 'orange'
+ | 'green'
+ | 'blue'
+ | 'yellow'
+ | 'violet'
+
+// Create an array of color values
+export const allColors: Color[] = [
+ 'zinc',
+ 'rose',
+ 'blue',
+ 'green',
+ 'orange',
+ 'red',
+ 'slate',
+ 'stone',
+ 'gray',
+ 'neutral',
+ 'yellow',
+ 'violet',
+]
+
+// interface Payment {
+// status: string
+// email: string
+// amount: number
+// }
interface TeamMember {
name: string
diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index 75ed175a..5f5e1190 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -8,11 +8,11 @@ export interface NavItem {
}
export type SidebarNavItem = NavItem & {
- items: SidebarNavItem[]
+ items?: SidebarNavItem[]
}
export type NavItemWithChildren = NavItem & {
- items: NavItemWithChildren[]
+ items?: NavItemWithChildren[]
}
interface DocsConfig {
@@ -23,7 +23,7 @@ interface DocsConfig {
export const docsConfig: DocsConfig = {
mainNav: [
{
- title: 'Documentation',
+ title: 'Docs',
href: '/docs/introduction',
},
{
@@ -36,7 +36,11 @@ export const docsConfig: DocsConfig = {
},
{
title: 'Examples',
- href: '/examples/dashboard',
+ href: '/examples/mail',
+ },
+ {
+ title: 'Blocks',
+ href: '/blocks',
},
{
title: 'GitHub',
@@ -51,46 +55,47 @@ export const docsConfig: DocsConfig = {
{
title: 'Introduction',
href: '/docs/introduction',
- items: [],
},
{
title: 'Installation',
href: '/docs/installation',
- items: [],
},
{
title: 'components.json',
href: '/docs/components-json',
- items: [],
},
{
title: 'Theming',
href: '/docs/theming',
+ },
+ {
+ title: 'Dark Mode',
+ href: '/docs/dark-mode',
items: [],
},
{
title: 'CLI',
href: '/docs/cli',
- items: [],
},
{
title: 'Typography',
href: '/docs/typography',
- items: [],
},
{
title: 'Figma',
href: '/docs/figma',
- items: [],
},
{
title: 'Changelog',
href: '/docs/changelog',
- items: [],
},
{
title: 'About',
href: '/docs/about',
+ },
+ {
+ title: 'Contribution',
+ href: '/docs/contribution',
items: [],
},
],
@@ -101,21 +106,34 @@ export const docsConfig: DocsConfig = {
{
title: 'Vite',
href: '/docs/installation/vite',
- items: [],
},
{
title: 'Nuxt',
href: '/docs/installation/nuxt',
- items: [],
},
{
title: 'Astro',
href: '/docs/installation/astro',
- items: [],
},
{
title: 'Laravel',
href: '/docs/installation/laravel',
+ },
+ ],
+ },
+ {
+ title: 'Extended',
+ items: [
+ {
+ title: 'Auto Form',
+ href: '/docs/components/auto-form',
+ items: [],
+ label: 'New',
+ },
+ {
+ title: 'Charts',
+ href: '/docs/charts',
+ label: 'New Alpha',
items: [],
},
],
@@ -126,230 +144,219 @@ export const docsConfig: DocsConfig = {
{
title: 'Accordion',
href: '/docs/components/accordion',
- items: [],
},
{
title: 'Alert',
href: '/docs/components/alert',
- items: [],
},
{
title: 'Alert Dialog',
href: '/docs/components/alert-dialog',
- items: [],
},
{
title: 'Aspect Ratio',
href: '/docs/components/aspect-ratio',
- items: [],
},
{
title: 'Avatar',
href: '/docs/components/avatar',
- items: [],
},
{
title: 'Badge',
href: '/docs/components/badge',
+ },
+ {
+ title: 'Breadcrumb',
+ href: '/docs/components/breadcrumb',
items: [],
},
{
title: 'Button',
href: '/docs/components/button',
- items: [],
},
{
title: 'Calendar',
href: '/docs/components/calendar',
items: [],
+ label: 'Updated',
},
{
title: 'Card',
href: '/docs/components/card',
- items: [],
},
{
title: 'Carousel',
href: '/docs/components/carousel',
- label: 'New',
items: [],
},
{
title: 'Checkbox',
href: '/docs/components/checkbox',
- items: [],
},
{
title: 'Collapsible',
href: '/docs/components/collapsible',
- items: [],
},
{
title: 'Combobox',
href: '/docs/components/combobox',
- items: [],
},
{
title: 'Command',
href: '/docs/components/command',
- items: [],
},
{
title: 'Context Menu',
href: '/docs/components/context-menu',
- items: [],
},
{
title: 'Data Table',
href: '/docs/components/data-table',
- items: [],
},
{
title: 'Date Picker',
href: '/docs/components/date-picker',
items: [],
+ label: 'Updated',
},
{
title: 'Dialog',
href: '/docs/components/dialog',
+ },
+ {
+ title: 'Drawer',
+ href: '/docs/components/drawer',
items: [],
},
{
title: 'Dropdown Menu',
href: '/docs/components/dropdown-menu',
- items: [],
},
{
title: 'Form',
href: '/docs/components/form',
- items: [],
},
{
title: 'Hover Card',
href: '/docs/components/hover-card',
- items: [],
},
{
title: 'Input',
href: '/docs/components/input',
- items: [],
},
{
title: 'Label',
href: '/docs/components/label',
- items: [],
},
{
title: 'Menubar',
href: '/docs/components/menubar',
- items: [],
},
{
title: 'Navigation Menu',
href: '/docs/components/navigation-menu',
- items: [],
+ },
+ {
+ title: 'Number Field',
+ href: '/docs/components/number-field',
+ label: 'New Alpha',
},
{
title: 'Pagination',
href: '/docs/components/pagination',
- items: [],
},
{
- title: 'Pin Input',
+ title: 'PIN Input',
href: '/docs/components/pin-input',
- label: 'New',
items: [],
},
{
title: 'Popover',
href: '/docs/components/popover',
- items: [],
},
{
title: 'Progress',
href: '/docs/components/progress',
- items: [],
},
{
title: 'Radio Group',
href: '/docs/components/radio-group',
+ },
+ {
+ title: 'Range Calendar',
+ href: '/docs/components/range-calendar',
+ items: [],
+ },
+ {
+ title: 'Resizable',
+ href: '/docs/components/resizable',
items: [],
},
{
title: 'Scroll Area',
href: '/docs/components/scroll-area',
- items: [],
},
{
title: 'Select',
href: '/docs/components/select',
- items: [],
},
{
title: 'Separator',
href: '/docs/components/separator',
- items: [],
},
{
title: 'Sheet',
href: '/docs/components/sheet',
- items: [],
},
{
title: 'Skeleton',
href: '/docs/components/skeleton',
- items: [],
},
{
title: 'Slider',
href: '/docs/components/slider',
- items: [],
},
{
title: 'Sonner',
href: '/docs/components/sonner',
- label: 'New',
items: [],
},
{
title: 'Switch',
href: '/docs/components/switch',
- items: [],
},
{
title: 'Table',
href: '/docs/components/table',
- items: [],
},
{
title: 'Tabs',
href: '/docs/components/tabs',
+ },
+ {
+ title: 'Tags Input',
+ href: '/docs/components/tags-input',
items: [],
},
{
title: 'Textarea',
href: '/docs/components/textarea',
- items: [],
},
{
title: 'Toast',
href: '/docs/components/toast',
- items: [],
},
{
title: 'Toggle',
href: '/docs/components/toggle',
- items: [],
},
{
title: 'Toggle Group',
href: '/docs/components/toggle-group',
- items: [],
},
{
title: 'Tooltip',
href: '/docs/components/tooltip',
- items: [],
},
],
},
@@ -373,6 +380,11 @@ interface Example {
code: string
}
export const examples: Example[] = [
+ {
+ name: 'Mail',
+ href: '/examples/mail',
+ code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/mail',
+ },
{
name: 'Dashboard',
href: '/examples/dashboard',
diff --git a/apps/www/.vitepress/theme/config/shiki.ts b/apps/www/.vitepress/theme/config/shiki.ts
new file mode 100644
index 00000000..b0e9745d
--- /dev/null
+++ b/apps/www/.vitepress/theme/config/shiki.ts
@@ -0,0 +1,6 @@
+import { createCssVariablesTheme } from 'shiki'
+
+export const cssVariables = createCssVariablesTheme({
+ variablePrefix: '--shiki-',
+ variableDefaults: {},
+})
diff --git a/apps/www/.vitepress/theme/config/site.ts b/apps/www/.vitepress/theme/config/site.ts
index b1ba1608..d5af14e3 100644
--- a/apps/www/.vitepress/theme/config/site.ts
+++ b/apps/www/.vitepress/theme/config/site.ts
@@ -15,6 +15,6 @@ export const siteConfig = {
export const announcementConfig = {
icon: 'β¨',
- title: 'New components!',
- link: '/docs/components/carousel.html',
+ title: 'Extended: Auto Form, Charts',
+ link: '/docs/components/auto-form.html',
}
diff --git a/apps/www/.vitepress/theme/index.ts b/apps/www/.vitepress/theme/index.ts
index 23a8ed8b..d4e14dc1 100644
--- a/apps/www/.vitepress/theme/index.ts
+++ b/apps/www/.vitepress/theme/index.ts
@@ -1,4 +1,3 @@
-/* eslint-disable vue/component-definition-name-casing */
// https://vitepress.dev/guide/custom-theme
import Layout from './layout/MainLayout.vue'
import DocsLayout from './layout/DocsLayout.vue'
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index 1ab12142..d4ad12e0 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -3,11 +3,10 @@ import { useData, useRoute } from 'vitepress'
import { docsConfig } from '../config/docs'
import TableOfContentVue from '../components/TableOfContent.vue'
import EditLink from '../components/EditLink.vue'
+import DocsBreadcrumb from '../components/DocsBreadcrumb.vue'
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
-import { Badge } from '@/lib/registry/default/ui/badge'
import RadixIconsCode from '~icons/radix-icons/code'
import RadixIconsExternalLink from '~icons/radix-icons/external-link'
-import ChevronRightIcon from '~icons/lucide/chevron-right'
const $route = useRoute()
const { frontmatter } = useData()
@@ -28,6 +27,10 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
class="mb-1 rounded-md px-2 py-1 text-sm font-semibold"
>
{{ docsGroup.title }}
+
+
+ {{ docsGroup.label }}
+