Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add custom prefix and aliases capability

Browse Source
This commit is contained in:
sadeghbarati 2023-11-19 15:29:07 +03:30 committed by Sadegh Barati
parent 4156bf6703
commit b3332695c1
41 changed files with 883 additions and 503 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.vscode/settings.json vendored
View File

@ -2,8 +2,8 @@
"prettier.enable": false, "prettier.enable": false,
"editor.formatOnSave": false, "editor.formatOnSave": false,
"editor.codeActionsOnSave": { "editor.codeActionsOnSave": {
"source.fixAll.eslint": true, "source.fixAll.eslint": "explicit",
"source.organizeImports": false "source.organizeImports": "never"
}, },
"eslint.validate": [ "eslint.validate": [

136
apps/www/.vitepress/theme/layout/ThemingLayout.vue
View File

@ -16,6 +16,10 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Di
import RadixIconsCheck from '~icons/radix-icons/check' import RadixIconsCheck from '~icons/radix-icons/check'
import RadixIconsSun from '~icons/radix-icons/sun' import RadixIconsSun from '~icons/radix-icons/sun'
import RadixIconsMoon from '~icons/radix-icons/moon' import RadixIconsMoon from '~icons/radix-icons/moon'
import RadixIconsReset from '~icons/radix-icons/reset'
import RadixIconsInfoCircled from '~icons/radix-icons/info-circled'
import { cn } from '@/lib/utils'
type Color = type Color =
| 'zinc' | 'zinc'
@ -47,7 +51,7 @@ const allColors: Color[] = [
'violet', 'violet',
] ]
const { theme, radius, setRadius, setTheme } = useConfigStore() const { theme, radius, setRadius, setTheme, codeConfig, config } = useConfigStore()
const { isDark } = useData() const { isDark } = useData()
// Whenever the component is mounted, update the document class list // Whenever the component is mounted, update the document class list
@ -131,17 +135,101 @@ watch(radius, (radius) => {
Customize Customize
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent :side-offset="8" align="end" class="w-96"> <PopoverContent :side-offset="8" align="end" class="p-6 w-96">
<div class="p-4"> <div>
<div class="grid space-y-1"> <div class="flex items-start">
<h1 class="text-md text-foreground font-semibold"> <div class="space-y-1 pr-2">
Customize <h1 class="text-md text-foreground font-semibold">
</h1> Customize
<p class="text-xs text-muted-foreground"> </h1>
Pick a style and color for your components. <p class="text-xs text-muted-foreground">
</p> Pick a style and color for your components.
</p>
</div>
<Button
variant="ghost" size="icon" class="ml-auto rounded-[0.5rem]" @click="() => {
config = {
...config,
theme: 'zinc',
radius: 0.5,
}
codeConfig = {
prefix: '',
aliases: {
components: '@/components',
utils: '@/lib/utils',
},
}
}"
>
<RadixIconsReset />
</Button>
</div> </div>
<div class="space-y-1.5 pt-6"> <div class="flex flex-1 flex-col space-y-4 md:space-y-6 pt-4">
<div class="space-y-1.5">
<div class="flex w-full items-center">
<Label class="text-xs">Style</Label>
<Popover>
<PopoverTrigger>
<RadixIconsInfoCircled class="ml-1 h-3 w-3" />
<span class="sr-only">About styles</span>
</PopoverTrigger>
<PopoverContent
class="space-y-3 rounded-[0.5rem] text-sm"
side="right"
align="start"
:align-offset="-20"
>
<p class="font-medium">
What is the difference between the New York and Default style?
</p>
<p>
A style comes with its own set of components, animations,
icons and more.
</p>
<p>
The <span class="font-medium">Default</span> style has
larger inputs, uses lucide-react for icons and
tailwindcss-animate for animations.
</p>
<p>
The <span class="font-medium">New York</span> style ships
with smaller buttons and cards with shadows. It uses icons
from Radix Icons.
</p>
</PopoverContent>
</Popover>
</div>
<div class="grid grid-cols-3 gap-2">
<Button
variant="outline"
size="sm"
:class="cn(
config.style === 'default' && 'border-2 border-primary',
)"
@click="() => {
config = { ...config, style: 'default' }
}"
>
Default
</Button>
<Button
variant="outline"
size="sm"
:class="cn(
config.style === 'new-york' && 'border-2 border-primary',
)"
@click="() => {
config = { ...config, style: 'new-york' }
}"
>
New York
</Button>
</div>
</div>
</div>
<div class="space-y-1.5 pt-4">
<Label for="color" class="text-xs"> Color </Label> <Label for="color" class="text-xs"> Color </Label>
<div class="grid grid-cols-3 gap-2 py-1.5"> <div class="grid grid-cols-3 gap-2 py-1.5">
<Button <Button
@ -171,7 +259,7 @@ watch(radius, (radius) => {
</Button> </Button>
</div> </div>
</div> </div>
<div class="space-y-1.5 pt-6"> <div class="space-y-1.5 pt-4">
<Label for="radius" class="text-xs"> Radius </Label> <Label for="radius" class="text-xs"> Radius </Label>
<div class="grid grid-cols-5 gap-2 py-1.5"> <div class="grid grid-cols-5 gap-2 py-1.5">
<Button <Button
@ -192,7 +280,7 @@ watch(radius, (radius) => {
</Button> </Button>
</div> </div>
</div> </div>
<div class="space-y-1.5 pt-6"> <div class="space-y-1.5 pt-4">
<Label for="theme" class="text-xs"> Theme </Label> <Label for="theme" class="text-xs"> Theme </Label>
<div class="flex space-x-2 py-1.5"> <div class="flex space-x-2 py-1.5">
@ -216,6 +304,28 @@ watch(radius, (radius) => {
</Button> </Button>
</div> </div>
</div> </div>
<div class="space-y-1.5 pt-4">
<div class="flex">
<div>
<Label for="components" class="text-xs"> Alias (components) </Label>
<div class="flex py-1.5">
<input id="components" v-model.lazy="codeConfig.aliases.components" class="flex h-9 w-full rounded-s-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
</div>
</div>
<div>
<Label for="utils" class="text-xs"> Alias (utils) </Label>
<div id="utils" class="flex py-1.5">
<input v-model.lazy="codeConfig.aliases.utils" class="flex h-9 w-full rounded-e-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
</div>
</div>
</div>
</div>
<div class="space-y-1.5 pt-3">
<Label for="radius" class="text-xs"> Prefix </Label>
<div class="py-1.5">
<input v-model.lazy="codeConfig.prefix" placeholder="Ui" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
</div>
</div>
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>

29
apps/www/src/content/docs/components/accordion.md
View File

@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/accordion
primitive: https://www.radix-vue.com/components/accordion.html primitive: https://www.radix-vue.com/components/accordion.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" /> <ComponentPreview name="AccordionDemo" class="sm:max-w-[70%]" />
@ -52,20 +58,25 @@ module.exports = {
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion' import {
{{codeConfig.prefix}}Accordion,
{{codeConfig.prefix}}AccordionContent,
{{codeConfig.prefix}}AccordionItem,
{{codeConfig.prefix}}AccordionTrigger
} from '{{codeConfig.aliases.components}}/ui/accordion'
</script> </script>
<template> <template>
<Accordion type="single" collapsible> <{{codeConfig.prefix}}Accordion type="single" collapsible>
<AccordionItem value="item-1"> <{{codeConfig.prefix}}AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger> <{{codeConfig.prefix}}AccordionTrigger>Is it accessible?</{{codeConfig.prefix}}AccordionTrigger>
<AccordionContent> <{{codeConfig.prefix}}AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern. Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent> </{{codeConfig.prefix}}AccordionContent>
</AccordionItem> </{{codeConfig.prefix}}AccordionItem>
</Accordion> </{{codeConfig.prefix}}Accordion>
</template> </template>
``` ```

57
apps/www/src/content/docs/components/alert-dialog.md
View File

@ -5,50 +5,53 @@ source: apps/www/src/lib/registry/default/ui/alert-dialog
primitive: https://www.radix-vue.com/components/alert-dialog.html primitive: https://www.radix-vue.com/components/alert-dialog.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="AlertDialogDemo" /> <ComponentPreview name="AlertDialogDemo" />
## Installation ## Installation
```bash ```bash
npx shadcn-vue@latest add alert-dialog npx shadcn-vue@latest add alert-dialog
``` ```
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
AlertDialog, {{codeConfig.prefix}}AlertDialog,
AlertDialogAction, {{codeConfig.prefix}}AlertDialogAction,
AlertDialogCancel, {{codeConfig.prefix}}AlertDialogCancel,
AlertDialogContent, {{codeConfig.prefix}}AlertDialogContent,
AlertDialogDescription, {{codeConfig.prefix}}AlertDialogDescription,
AlertDialogFooter, {{codeConfig.prefix}}AlertDialogFooter,
AlertDialogHeader, {{codeConfig.prefix}}AlertDialogHeader,
AlertDialogTitle, {{codeConfig.prefix}}AlertDialogTitle,
AlertDialogTrigger, {{codeConfig.prefix}}AlertDialogTrigger,
} from '@/components/ui/alert-dialog' } from '{{codeConfig.aliases.components}}/ui/alert-dialog'
</script> </script>
<template> <template>
<AlertDialog> <{{codeConfig.prefix}}AlertDialog>
<AlertDialogTrigger>Open</AlertDialogTrigger> <{{codeConfig.prefix}}AlertDialogTrigger>Open</{{codeConfig.prefix}}AlertDialogTrigger>
<AlertDialogContent> <{{codeConfig.prefix}}AlertDialogContent>
<AlertDialogHeader> <{{codeConfig.prefix}}AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <{{codeConfig.prefix}}AlertDialogTitle>Are you absolutely sure?</{{codeConfig.prefix}}AlertDialogTitle>
<AlertDialogDescription> <{{codeConfig.prefix}}AlertDialogDescription>
This action cannot be undone. This will permanently delete your account This action cannot be undone. This will permanently delete your account
and remove your data from our servers. and remove your data from our servers.
</AlertDialogDescription> </{{codeConfig.prefix}}AlertDialogDescription>
</AlertDialogHeader> </{{codeConfig.prefix}}AlertDialogHeader>
<AlertDialogFooter> <{{codeConfig.prefix}}AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel> <{{codeConfig.prefix}}AlertDialogCancel>Cancel</{{codeConfig.prefix}}AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction> <{{codeConfig.prefix}}AlertDialogAction>Continue</{{codeConfig.prefix}}AlertDialogAction>
</AlertDialogFooter> </{{codeConfig.prefix}}AlertDialogFooter>
</AlertDialogContent> </{{codeConfig.prefix}}AlertDialogContent>
</AlertDialog> </{{codeConfig.prefix}}AlertDialog>
</template> </template>
``` ```

19
apps/www/src/content/docs/components/alert.md
View File

@ -3,6 +3,11 @@ title: Alert
description: Displays a callout for user attention. description: Displays a callout for user attention.
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="AlertDemo" /> <ComponentPreview name="AlertDemo" />
@ -15,18 +20,18 @@ npx shadcn-vue@latest add alert
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' import { {{codeConfig.prefix}}Alert, {{codeConfig.prefix}}AlertDescription, {{codeConfig.prefix}}AlertTitle } from '{{codeConfig.aliases.components}}/ui/alert'
</script> </script>
<template> <template>
<Alert> <{{codeConfig.prefix}}Alert>
<AlertTitle>Heads up!</AlertTitle> <{{codeConfig.prefix}}AlertTitle>Heads up!</{{codeConfig.prefix}}AlertTitle>
<AlertDescription> <{{codeConfig.prefix}}AlertDescription>
You can add components to your app using the cli. You can add components to your app using the cli.
</AlertDescription> </{{codeConfig.prefix}}AlertDescription>
</Alert> </{{codeConfig.prefix}}Alert>
</template> </template>
``` ```

14
apps/www/src/content/docs/components/aspect-ratio.md
View File

@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/aspect-ratio
primitive: https://www.radix-vue.com/components/aspect-ratio.html primitive: https://www.radix-vue.com/components/aspect-ratio.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="AspectRatioDemo" /> <ComponentPreview name="AspectRatioDemo" />
@ -39,16 +45,16 @@ npm install radix-vue
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { AspectRatio } from '@/components/ui/aspect-ratio' import { {{codeConfig.prefix}}AspectRatio } from '{{codeConfig.aliases.components}}/ui/aspect-ratio'
</script> </script>
<template> <template>
<div class="w-[450px]"> <div class="w-[450px]">
<AspectRatio :ratio="16 / 9"> <{{codeConfig.prefix}}AspectRatio :ratio="16 / 9">
<img src="..." alt="Image" class="rounded-md object-cover"> <img src="..." alt="Image" class="rounded-md object-cover">
</AspectRatio> </{{codeConfig.prefix}}AspectRatio>
</div> </div>
</template> </template>
``` ```

18
apps/www/src/content/docs/components/avatar.md
View File

@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/avatar
primitive: https://www.radix-vue.com/components/avatar.html primitive: https://www.radix-vue.com/components/avatar.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="AvatarDemo" /> <ComponentPreview name="AvatarDemo" />
@ -18,15 +24,15 @@ npx shadcn-vue@latest add avatar
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { {{codeConfig.prefix}}Avatar, {{codeConfig.prefix}}AvatarFallback, {{codeConfig.prefix}}AvatarImage } from '{{codeConfig.aliases.components}}/ui/avatar'
</script> </script>
<template> <template>
<Avatar> <{{codeConfig.prefix}}Avatar>
<AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" /> <{{codeConfig.prefix}}AvatarImage src="https://github.com/radix-vue.png" alt="@radix-vue" />
<AvatarFallback>CN</AvatarFallback> <{{codeConfig.prefix}}AvatarFallback>CN</{{codeConfig.prefix}}AvatarFallback>
</Avatar> </{{codeConfig.prefix}}Avatar>
</template> </template>
``` ```

16
apps/www/src/content/docs/components/badge.md
View File

@ -3,6 +3,12 @@ title: Badge
description: Displays a badge or a component that looks like a badge. description: Displays a badge or a component that looks like a badge.
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="BadgeDemo" /> <ComponentPreview name="BadgeDemo" />
@ -22,10 +28,10 @@ npx shadcn-vue@latest add badge
### Copy and paste the following code into your project ### Copy and paste the following code into your project
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { type VariantProps, cva } from 'class-variance-authority' import { type VariantProps, cva } from 'class-variance-authority'
import { cn } from '@/lib/utils' import { cn } from '{{codeConfig.aliases.utils}}'
defineProps<Props>() defineProps<Props>()
@ -70,13 +76,13 @@ interface Props {
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Badge } from '@/components/ui/badge' import { {{codeConfig.prefix}}Badge } from '{{codeConfig.aliases.components}}/ui/badge'
</script> </script>
<template> <template>
<Badge>Badge</Badge> <{{codeConfig.prefix}}Badge>Badge</{{codeConfig.prefix}}Badge>
</template> </template>
``` ```

16
apps/www/src/content/docs/components/button.md
View File

@ -3,6 +3,12 @@ title: Button
description: Displays a button or a component that looks like a button. description: Displays a button or a component that looks like a button.
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="ButtonDemo" /> <ComponentPreview name="ButtonDemo" />
@ -22,10 +28,10 @@ npx shadcn-vue@latest add button
### Copy and paste the following code into your project ### Copy and paste the following code into your project
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { cva } from 'class-variance-authority' import { cva } from 'class-variance-authority'
import { cn } from '@/lib/utils' import { cn } from '{{codeConfig.aliases.utils}}'
const buttonVariants = cva( const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
@ -84,13 +90,13 @@ withDefaults(defineProps<Props>(), {
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Button } from '@/components/ui/button' import { {{codeConfig.prefix}}Button } from '{{codeConfig.aliases.components}}/ui/button'
</script> </script>
<template> <template>
<Button>Button</Button> <{{codeConfig.prefix}}Button>Button</{{codeConfig.prefix}}Button>
</template> </template>
``` ```

12
apps/www/src/content/docs/components/calendar.md
View File

@ -3,6 +3,12 @@ title: Calendar
description: A date field component that allows users to enter and edit date. description: A date field component that allows users to enter and edit date.
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="CalendarDemo" /> <ComponentPreview name="CalendarDemo" />
@ -44,13 +50,13 @@ npm install v-calendar
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Calendar } from '@/components/ui/calendar' import { {{codeConfig.prefix}}Calendar } from '{{codeConfig.aliases.components}}/ui/calendar'
</script> </script>
<template> <template>
<Calendar /> <{{codeConfig.prefix}}Calendar />
</template> </template>
``` ```

42
apps/www/src/content/docs/components/card.md
View File

@ -3,6 +3,12 @@ title: Card
description: Displays a card with header, content, and footer. description: Displays a card with header, content, and footer.
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="CardFormDemo" /> <ComponentPreview name="CardFormDemo" />
@ -16,31 +22,31 @@ npx shadcn-vue@latest add card
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
Card, {{codeConfig.prefix}}Card,
CardContent, {{codeConfig.prefix}}CardContent,
CardDescription, {{codeConfig.prefix}}CardDescription,
CardFooter, {{codeConfig.prefix}}CardFooter,
CardHeader, {{codeConfig.prefix}}CardHeader,
CardTitle, {{codeConfig.prefix}}CardTitle,
} from '@/components/ui/card' } from '{{codeConfig.aliases.components}}/ui/card'
</script> </script>
<template> <template>
<Card> <{{codeConfig.prefix}}Card>
<CardHeader> <{{codeConfig.prefix}}CardHeader>
<CardTitle>Card Title</CardTitle> <{{codeConfig.prefix}}CardTitle>Card Title</{{codeConfig.prefix}}CardTitle>
<CardDescription>Card Description</CardDescription> <{{codeConfig.prefix}}CardDescription>Card Description</{{codeConfig.prefix}}CardDescription>
</CardHeader> </{{codeConfig.prefix}}CardHeader>
<CardContent> <{{codeConfig.prefix}}CardContent>
Card Content Card Content
</CardContent> </{{codeConfig.prefix}}CardContent>
<CardFooter> <{{codeConfig.prefix}}CardFooter>
Card Footer Card Footer
</CardFooter> </{{codeConfig.prefix}}CardFooter>
</Card> </{{codeConfig.prefix}}Card>
</template> </template>
``` ```

12
apps/www/src/content/docs/components/checkbox.md
View File

@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/checkbox
primitive: https://www.radix-vue.com/components/checkbox.html primitive: https://www.radix-vue.com/components/checkbox.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="CheckboxDemo" /> <ComponentPreview name="CheckboxDemo" />
@ -18,13 +24,13 @@ npx shadcn-vue@latest add checkbox
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Checkbox } from '@/components/ui/checkbox' import { {{codeConfig.prefix}}Checkbox } from '{{codeConfig.aliases.components}}/ui/checkbox'
</script> </script>
<template> <template>
<Checkbox id="terms" /> <{{codeConfig.prefix}}Checkbox id="terms" />
</template> </template>
``` ```

26
apps/www/src/content/docs/components/collapsible.md
View File

@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/collapsible
primitive: https://www.radix-vue.com/components/collapsible.html primitive: https://www.radix-vue.com/components/collapsible.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="CollapsibleDemo" /> <ComponentPreview name="CollapsibleDemo" />
@ -52,25 +58,25 @@ module.exports = {
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { import {
Collapsible, {{codeConfig.prefix}}Collapsible,
CollapsibleContent, {{codeConfig.prefix}}CollapsibleContent,
CollapsibleTrigger, {{codeConfig.prefix}}CollapsibleTrigger,
} from '@/components/ui/collapsible' } from '{{codeConfig.aliases.components}}/ui/collapsible'
const isOpen = ref(false) const isOpen = ref(false)
</script> </script>
<template> <template>
<Collapsible v-model:open="isOpen"> <{{codeConfig.prefix}}Collapsible v-model:open="isOpen">
<CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger> <{{codeConfig.prefix}}CollapsibleTrigger>Can I use this in my project?</{{codeConfig.prefix}}CollapsibleTrigger>
<CollapsibleContent> <{{codeConfig.prefix}}CollapsibleContent>
Yes. Free to use for personal and commercial projects. No attribution Yes. Free to use for personal and commercial projects. No attribution
required. required.
</CollapsibleContent> </{{codeConfig.prefix}}CollapsibleContent>
</Collapsible> </{{codeConfig.prefix}}Collapsible>
</template> </template>
``` ```

74
apps/www/src/content/docs/components/command.md
View File

@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/command
primitive: https://www.radix-vue.com/components/combobox.html primitive: https://www.radix-vue.com/components/combobox.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="CommandDemo" /> <ComponentPreview name="CommandDemo" />
@ -18,51 +24,51 @@ npx shadcn-vue@latest add command
``` ```
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
Command, {{codeConfig.prefix}}Command,
CommandDialog, {{codeConfig.prefix}}CommandDialog,
CommandEmpty, {{codeConfig.prefix}}CommandEmpty,
CommandGroup, {{codeConfig.prefix}}CommandGroup,
CommandInput, {{codeConfig.prefix}}CommandInput,
CommandItem, {{codeConfig.prefix}}CommandItem,
CommandList, {{codeConfig.prefix}}CommandList,
CommandSeparator, {{codeConfig.prefix}}CommandSeparator,
CommandShortcut, {{codeConfig.prefix}}CommandShortcut,
} from '@/components/ui/command' } from '{{codeConfig.aliases.components}}/ui/command'
</script> </script>
<template> <template>
<Command> <{{codeConfig.prefix}}Command>
<CommandInput placeholder="Type a command or search..." /> <{{codeConfig.prefix}}CommandInput placeholder="Type a command or search..." />
<CommandList> <{{codeConfig.prefix}}CommandList>
<CommandEmpty>No results found.</CommandEmpty> <{{codeConfig.prefix}}CommandEmpty>No results found.</{{codeConfig.prefix}}CommandEmpty>
<CommandGroup heading="Suggestions"> <{{codeConfig.prefix}}CommandGroup heading="Suggestions">
<CommandItem value="calendar"> <{{codeConfig.prefix}}CommandItem value="calendar">
Calendar Calendar
</CommandItem> </{{codeConfig.prefix}}CommandItem>
<CommandItem value="search-emoji"> <{{codeConfig.prefix}}CommandItem value="search-emoji">
Search Emoji Search Emoji
</CommandItem> </{{codeConfig.prefix}}CommandItem>
<CommandItem value="calculator"> <{{codeConfig.prefix}}CommandItem value="calculator">
Calculator Calculator
</CommandItem> </{{codeConfig.prefix}}CommandItem>
</CommandGroup> </{{codeConfig.prefix}}CommandGroup>
<CommandSeparator /> <{{codeConfig.prefix}}CommandSeparator />
<CommandGroup heading="Settings"> <{{codeConfig.prefix}}CommandGroup heading="Settings">
<CommandItem value="profile"> <{{codeConfig.prefix}}CommandItem value="profile">
Profile Profile
</CommandItem> </{{codeConfig.prefix}}CommandItem>
<CommandItem value="billing"> <{{codeConfig.prefix}}CommandItem value="billing">
Billing Billing
</CommandItem> </{{codeConfig.prefix}}CommandItem>
<CommandItem value="settings"> <{{codeConfig.prefix}}CommandItem value="settings">
Settings Settings
</CommandItem> </{{codeConfig.prefix}}CommandItem>
</CommandGroup> </{{codeConfig.prefix}}CommandGroup>
</CommandList> </{{codeConfig.prefix}}CommandList>
</Command> </{{codeConfig.prefix}}Command>
</template> </template>
``` ```

54
apps/www/src/content/docs/components/context-menu.md
View File

@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/context-menu
primitive: https://www.radix-vue.com/components/context-menu.html primitive: https://www.radix-vue.com/components/context-menu.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="ContextMenuDemo" /> <ComponentPreview name="ContextMenuDemo" />
@ -16,34 +22,34 @@ npx shadcn-vue@latest add context-menu
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
ContextMenu, {{codeConfig.prefix}}ContextMenu,
ContextMenuCheckboxItem, {{codeConfig.prefix}}ContextMenuCheckboxItem,
ContextMenuContent, {{codeConfig.prefix}}ContextMenuContent,
ContextMenuItem, {{codeConfig.prefix}}ContextMenuItem,
ContextMenuLabel, {{codeConfig.prefix}}ContextMenuLabel,
ContextMenuRadioGroup, {{codeConfig.prefix}}ContextMenuRadioGroup,
ContextMenuRadioItem, {{codeConfig.prefix}}ContextMenuRadioItem,
ContextMenuSeparator, {{codeConfig.prefix}}ContextMenuSeparator,
ContextMenuShortcut, {{codeConfig.prefix}}ContextMenuShortcut,
ContextMenuSub, {{codeConfig.prefix}}ContextMenuSub,
ContextMenuSubContent, {{codeConfig.prefix}}ContextMenuSubContent,
ContextMenuSubTrigger, {{codeConfig.prefix}}ContextMenuSubTrigger,
ContextMenuTrigger, {{codeConfig.prefix}}ContextMenuTrigger,
} from '@/components/ui/context-menu' } from '{{codeConfig.aliases.components}}/ui/context-menu'
</script> </script>
<template> <template>
<ContextMenu> <{{codeConfig.prefix}}ContextMenu>
<ContextMenuTrigger>Right click</ContextMenuTrigger> <{{codeConfig.prefix}}ContextMenuTrigger>Right click</{{codeConfig.prefix}}ContextMenuTrigger>
<ContextMenuContent> <{{codeConfig.prefix}}ContextMenuContent>
<ContextMenuItem>Profile</ContextMenuItem> <{{codeConfig.prefix}}ContextMenuItem>Profile</{{codeConfig.prefix}}ContextMenuItem>
<ContextMenuItem>Billing</ContextMenuItem> <{{codeConfig.prefix}}ContextMenuItem>Billing</{{codeConfig.prefix}}ContextMenuItem>
<ContextMenuItem>Team</ContextMenuItem> <{{codeConfig.prefix}}ContextMenuItem>Team</{{codeConfig.prefix}}ContextMenuItem>
<ContextMenuItem>Subscription</ContextMenuItem> <{{codeConfig.prefix}}ContextMenuItem>Subscription</{{codeConfig.prefix}}ContextMenuItem>
</ContextMenuContent> </{{codeConfig.prefix}}ContextMenuContent>
</ContextMenu> </{{codeConfig.prefix}}ContextMenu>
</template> </template>
``` ```

41
apps/www/src/content/docs/components/date-picker.md
View File

@ -3,6 +3,13 @@ title: Date Picker
description: A date picker component with range and presets. description: A date picker component with range and presets.
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="DatePickerDemo" /> <ComponentPreview name="DatePickerDemo" />
@ -14,28 +21,28 @@ See installation instructions for the [Popover](/docs/components/popover#install
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { format } from 'date-fns' import { format } from 'date-fns'
import { Calendar as CalendarIcon } from 'lucide-vue-next' import { Calendar as CalendarIcon } from 'lucide-vue-next'
import { ref } from 'vue' import { ref } from 'vue'
import { cn } from '@/lib/utils' import { cn } from '{{codeConfig.aliases.utils}}'
import { Button } from '@/components/ui/button' import { {{codeConfig.prefix}}Button } from '{{codeConfig.aliases.components}}/ui/button'
import { Calendar } from '@/components/ui/calendar' import { {{codeConfig.prefix}}Calendar } from '{{codeConfig.aliases.components}}/ui/calendar'
import { import {
Popover, {{codeConfig.prefix}}Popover,
PopoverContent, {{codeConfig.prefix}}PopoverContent,
PopoverTrigger, {{codeConfig.prefix}}PopoverTrigger,
} from '@/components/ui/popover' } from '{{codeConfig.aliases.components}}/ui/popover'
const date = ref<Date>() const date = ref<Date>()
</script> </script>
<template> <template>
<Popover> <{{codeConfig.prefix}}Popover>
<PopoverTrigger as-child> <{{codeConfig.prefix}}PopoverTrigger as-child>
<Button <{{codeConfig.prefix}}Button
:variant="'outline'" :variant="'outline'"
:class="cn( :class="cn(
'w-[280px] justify-start text-left font-normal', 'w-[280px] justify-start text-left font-normal',
@ -44,12 +51,12 @@ const date = ref<Date>()
> >
<CalendarIcon class="mr-2 h-4 w-4" /> <CalendarIcon class="mr-2 h-4 w-4" />
<span>{{ date ? format(date, "PPP") : "Pick a date" }}</span> <span>{{ date ? format(date, "PPP") : "Pick a date" }}</span>
</Button> </{{codeConfig.prefix}}Button>
</PopoverTrigger> </{{codeConfig.prefix}}PopoverTrigger>
<PopoverContent class="w-auto p-0"> <{{codeConfig.prefix}}PopoverContent class="w-auto p-0">
<Calendar v-model="date" /> <{{codeConfig.prefix}}Calendar v-model="date" />
</PopoverContent> </{{codeConfig.prefix}}PopoverContent>
</Popover> </{{codeConfig.prefix}}Popover>
</template> </template>
``` ```

50
apps/www/src/content/docs/components/dialog.md
View File

@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/dialog
primitive: https://www.radix-vue.com/components/dialog.html primitive: https://www.radix-vue.com/components/dialog.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="DialogDemo" /> <ComponentPreview name="DialogDemo" />
@ -15,37 +21,37 @@ npx shadcn-vue@latest add dialog
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
Dialog, {{codeConfig.prefix}}Dialog,
DialogContent, {{codeConfig.prefix}}DialogContent,
DialogDescription, {{codeConfig.prefix}}DialogDescription,
DialogFooter, {{codeConfig.prefix}}DialogFooter,
DialogHeader, {{codeConfig.prefix}}DialogHeader,
DialogTitle, {{codeConfig.prefix}}DialogTitle,
DialogTrigger, {{codeConfig.prefix}}DialogTrigger,
} from '@/components/ui/dialog' } from '{{codeConfig.aliases.components}}/ui/dialog'
</script> </script>
<template> <template>
<Dialog> <{{codeConfig.prefix}}Dialog>
<DialogTrigger> <{{codeConfig.prefix}}DialogTrigger>
Edit Profile Edit Profile
</DialogTrigger> </{{codeConfig.prefix}}DialogTrigger>
<DialogContent> <{{codeConfig.prefix}}DialogContent>
<DialogHeader> <{{codeConfig.prefix}}DialogHeader>
<DialogTitle>Edit profile</DialogTitle> <{{codeConfig.prefix}}DialogTitle>Edit profile</{{codeConfig.prefix}}DialogTitle>
<DialogDescription> <{{codeConfig.prefix}}DialogDescription>
Make changes to your profile here. Click save when you're done. Make changes to your profile here. Click save when you're done.
</DialogDescription> </{{codeConfig.prefix}}DialogDescription>
</DialogHeader> </{{codeConfig.prefix}}DialogHeader>
<DialogFooter> <{{codeConfig.prefix}}DialogFooter>
Save changes Save changes
</DialogFooter> </{{codeConfig.prefix}}DialogFooter>
</DialogContent> </{{codeConfig.prefix}}DialogContent>
</Dialog> </{{codeConfig.prefix}}Dialog>
</template> </template>
``` ```

44
apps/www/src/content/docs/components/dropdown-menu.md
View File

@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/dropdown-menu
primitive: https://www.radix-vue.com/components/dropdown-menu.html primitive: https://www.radix-vue.com/components/dropdown-menu.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="DropdownMenuDemo" /> <ComponentPreview name="DropdownMenuDemo" />
@ -15,29 +21,29 @@ npx shadcn-vue@latest add dropdown-menu
``` ```
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
DropdownMenu, {{codeConfig.prefix}}DropdownMenu,
DropdownMenuContent, {{codeConfig.prefix}}DropdownMenuContent,
DropdownMenuItem, {{codeConfig.prefix}}DropdownMenuItem,
DropdownMenuLabel, {{codeConfig.prefix}}DropdownMenuLabel,
DropdownMenuSeparator, {{codeConfig.prefix}}DropdownMenuSeparator,
DropdownMenuTrigger, {{codeConfig.prefix}}DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu' } from '{{codeConfig.aliases.components}}/ui/dropdown-menu'
</script> </script>
<template> <template>
<DropdownMenu> <{{codeConfig.prefix}}DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger> <{{codeConfig.prefix}}DropdownMenuTrigger>Open</{{codeConfig.prefix}}DropdownMenuTrigger>
<DropdownMenuContent> <{{codeConfig.prefix}}DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel> <{{codeConfig.prefix}}DropdownMenuLabel>My Account</{{codeConfig.prefix}}DropdownMenuLabel>
<DropdownMenuSeparator /> <{{codeConfig.prefix}}DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem> <{{codeConfig.prefix}}DropdownMenuItem>Profile</{{codeConfig.prefix}}DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem> <{{codeConfig.prefix}}DropdownMenuItem>Billing</{{codeConfig.prefix}}DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem> <{{codeConfig.prefix}}DropdownMenuItem>Team</{{codeConfig.prefix}}DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem> <{{codeConfig.prefix}}DropdownMenuItem>Subscription</{{codeConfig.prefix}}DropdownMenuItem>
</DropdownMenuContent> </{{codeConfig.prefix}}DropdownMenuContent>
</DropdownMenu> </{{codeConfig.prefix}}DropdownMenu>
</template> </template>
``` ```

87
apps/www/src/content/docs/components/form.md
View File

@ -3,6 +3,13 @@ title: VeeValidate
description: Building forms with VeeValidate and Zod. description: Building forms with VeeValidate and Zod.
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex. Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex.
Well-designed HTML forms are: Well-designed HTML forms are:
@ -35,19 +42,33 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
## Anatomy ## Anatomy
```vue ```vue-vue
<Form> <script setup lang="ts">
<FormField v-slot="{ ... }"> import {
<FormItem> {{codeConfig.prefix}}Form,
<FormLabel /> {{codeConfig.prefix}}FormField,
<FormControl> {{codeConfig.prefix}}FormItem,
{{codeConfig.prefix}}FormLabel,
{{codeConfig.prefix}}FormControl,
{{codeConfig.prefix}}FormDescription,
{{codeConfig.prefix}}FormMessage,
} from '{{codeConfig.aliases.components}}/ui/form'
</script>
```
```vue-vue
<{{codeConfig.prefix}}Form>
<{{codeConfig.prefix}}FormField v-slot="{ ... }">
<{{codeConfig.prefix}}FormItem>
<{{codeConfig.prefix}}FormLabel />
<{{codeConfig.prefix}}FormControl>
<!-- any Form Input component or native input elements --> <!-- any Form Input component or native input elements -->
</FormControl> </{{codeConfig.prefix}}FormControl>
<FormDescription /> <{{codeConfig.prefix}}FormDescription />
<FormMessage /> <{{codeConfig.prefix}}FormMessage />
</FormItem> </{{codeConfig.prefix}}FormItem>
</FormField> </{{codeConfig.prefix}}FormField>
</Form> </{{codeConfig.prefix}}Form>
``` ```
## Example ## Example
@ -58,17 +79,17 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
#### `Input` Component #### `Input` Component
```vue ```vue-vue
<FormField v-slot="{ componentField }"> <{{codeConfig.prefix}}FormField v-slot="{ componentField }">
<FormItem> <{{codeConfig.prefix}}FormItem>
<FormLabel>Username</FormLabel> <{{codeConfig.prefix}}FormLabel>Username</{{codeConfig.prefix}}FormLabel>
<FormControl> <{{codeConfig.prefix}}FormControl>
<Input placeholder="shadcn" v-bind="componentField" /> <{{codeConfig.prefix}}Input placeholder="shadcn" v-bind="componentField" />
</FormControl> </{{codeConfig.prefix}}FormControl>
<FormDescription /> <{{codeConfig.prefix}}FormDescription />
<FormMessage /> <{{codeConfig.prefix}}FormMessage />
</FormItem> </{{codeConfig.prefix}}FormItem>
</FormField> </{{codeConfig.prefix}}FormField>
``` ```
</template> </template>
@ -77,17 +98,17 @@ The `<Form />` component is a wrapper around the `vee-validate` library. It prov
#### native `input` element #### native `input` element
```vue ```vue-vue
<FormField v-slot="{ field }"> <{{codeConfig.prefix}}FormField v-slot="{ field }">
<FormItem> <{{codeConfig.prefix}}FormItem>
<FormLabel>Username</FormLabel> <{{codeConfig.prefix}}FormLabel>Username</{{codeConfig.prefix}}FormLabel>
<FormControl> <{{codeConfig.prefix}}FormControl>
<input placeholder="shadcn" v-bind="field" /> <input placeholder="shadcn" v-bind="field" />
</FormControl> </{{codeConfig.prefix}}FormControl>
<FormDescription /> <{{codeConfig.prefix}}FormDescription />
<FormMessage /> <{{codeConfig.prefix}}FormMessage />
</FormItem> </{{codeConfig.prefix}}FormItem>
</FormField> </{{codeConfig.prefix}}FormField>
``` ```
</template> </template>

26
apps/www/src/content/docs/components/hover-card.md
View File

@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/hover-card
primitive: https://www.radix-vue.com/components/hover-card.html primitive: https://www.radix-vue.com/components/hover-card.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="HoverCardDemo" /> <ComponentPreview name="HoverCardDemo" />
@ -15,21 +21,21 @@ npx shadcn-vue@latest add hover-card
``` ```
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
HoverCard, {{codeConfig.prefix}}HoverCard,
HoverCardContent, {{codeConfig.prefix}}HoverCardContent,
HoverCardTrigger, {{codeConfig.prefix}}HoverCardTrigger,
} from '@/components/ui/hover-card' } from '{{codeConfig.aliases.components}}/ui/hover-card'
</script> </script>
<template> <template>
<HoverCard> <{{codeConfig.prefix}}HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger> <{{codeConfig.prefix}}HoverCardTrigger>Hover</{{codeConfig.prefix}}HoverCardTrigger>
<HoverCardContent> <{{codeConfig.prefix}}HoverCardContent>
The Vue Framework – created and maintained by @vuejs. The Vue Framework – created and maintained by @vuejs.
</HoverCardContent> </{{codeConfig.prefix}}HoverCardContent>
</HoverCard> </{{codeConfig.prefix}}HoverCard>
</template> </template>
``` ```

13
apps/www/src/content/docs/components/input.md
View File

@ -3,6 +3,13 @@ title: Input
description: Displays a form input field or a component that looks like an input field. description: Displays a form input field or a component that looks like an input field.
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="InputDemo" class="max-w-xs" /> <ComponentPreview name="InputDemo" class="max-w-xs" />
@ -33,13 +40,13 @@ npx shadcn-vue@latest add input
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Input } from '@/components/ui/input' import { {{codeConfig.prefix}}Input } from '{{codeConfig.aliases.components}}/ui/input'
</script> </script>
<template> <template>
<Input /> <{{codeConfig.prefix}}Input />
</template> </template>
``` ```

13
apps/www/src/content/docs/components/label.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/label
primitive: https://www.radix-vue.com/components/label.html primitive: https://www.radix-vue.com/components/label.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="LabelDemo" /> <ComponentPreview name="LabelDemo" />
@ -39,12 +46,12 @@ npm install radix-vue
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Label } from '@/components/ui/label' import { {{codeConfig.prefix}}Label } from '{{codeConfig.aliases.components}}/ui/label'
</script> </script>
<template> <template>
<Label for="email">Your email address</Label> <{{codeConfig.prefix}}Label for="email">Your email address</{{codeConfig.prefix}}Label>
</template> </template>
``` ```

55
apps/www/src/content/docs/components/menubar.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/menubar
primitive: https://www.radix-vue.com/components/menubar.html primitive: https://www.radix-vue.com/components/menubar.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="MenubarDemo" /> <ComponentPreview name="MenubarDemo" />
## Installation ## Installation
@ -16,34 +23,34 @@ npx shadcn-vue@latest add menubar
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
Menubar, {{codeConfig.prefix}}Menubar,
MenubarContent, {{codeConfig.prefix}}MenubarContent,
MenubarItem, {{codeConfig.prefix}}MenubarItem,
MenubarMenu, {{codeConfig.prefix}}MenubarMenu,
MenubarSeparator, {{codeConfig.prefix}}MenubarSeparator,
MenubarShortcut, {{codeConfig.prefix}}MenubarShortcut,
MenubarTrigger, {{codeConfig.prefix}}MenubarTrigger,
} from '@/components/ui/menubar' } from '{{codeConfig.aliases.components}}/ui/menubar'
</script> </script>
<template> <template>
<Menubar> <{{codeConfig.prefix}}Menubar>
<MenubarMenu> <{{codeConfig.prefix}}MenubarMenu>
<MenubarTrigger>File</MenubarTrigger> <{{codeConfig.prefix}}MenubarTrigger>File</{{codeConfig.prefix}}MenubarTrigger>
<MenubarContent> <{{codeConfig.prefix}}MenubarContent>
<MenubarItem> <{{codeConfig.prefix}}MenubarItem>
New Tab <MenubarShortcut>⌘T</MenubarShortcut> New Tab <{{codeConfig.prefix}}MenubarShortcut>⌘T</{{codeConfig.prefix}}MenubarShortcut>
</MenubarItem> </{{codeConfig.prefix}}MenubarItem>
<MenubarItem>New Window</MenubarItem> <{{codeConfig.prefix}}MenubarItem>New Window</{{codeConfig.prefix}}MenubarItem>
<MenubarSeparator /> <{{codeConfig.prefix}}MenubarSeparator />
<MenubarItem>Share</MenubarItem> <{{codeConfig.prefix}}MenubarItem>Share</{{codeConfig.prefix}}MenubarItem>
<MenubarSeparator /> <{{codeConfig.prefix}}MenubarSeparator />
<MenubarItem>Print</MenubarItem> <{{codeConfig.prefix}}MenubarItem>Print</{{codeConfig.prefix}}MenubarItem>
</MenubarContent> </{{codeConfig.prefix}}MenubarContent>
</MenubarMenu> </{{codeConfig.prefix}}MenubarMenu>
</Menubar> </{{codeConfig.prefix}}Menubar>
</template> </template>
``` ```

47
apps/www/src/content/docs/components/navigation-menu.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/navigation-menu
primitive: https://www.radix-vue.com/components/navigation-menu.html primitive: https://www.radix-vue.com/components/navigation-menu.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="NavigationMenuDemo" /> <ComponentPreview name="NavigationMenuDemo" />
## Installation ## Installation
@ -15,31 +22,31 @@ npx shadcn-vue@latest add navigation-menu
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
NavigationMenu, {{codeConfig.prefix}}NavigationMenu,
NavigationMenuContent, {{codeConfig.prefix}}NavigationMenuContent,
NavigationMenuIndicator, {{codeConfig.prefix}}NavigationMenuIndicator,
NavigationMenuItem, {{codeConfig.prefix}}NavigationMenuItem,
NavigationMenuLink, {{codeConfig.prefix}}NavigationMenuLink,
NavigationMenuList, {{codeConfig.prefix}}NavigationMenuList,
NavigationMenuTrigger, {{codeConfig.prefix}}NavigationMenuTrigger,
NavigationMenuViewport, {{codeConfig.prefix}}NavigationMenuViewport,
} from '@/components/ui/navigation-menu' } from '{{codeConfig.aliases.components}}/ui/navigation-menu'
</script> </script>
<template> <template>
<NavigationMenu> <{{codeConfig.prefix}}NavigationMenu>
<NavigationMenuList> <{{codeConfig.prefix}}NavigationMenuList>
<NavigationMenuItem> <{{codeConfig.prefix}}NavigationMenuItem>
<NavigationMenuTrigger>Item One</NavigationMenuTrigger> <{{codeConfig.prefix}}NavigationMenuTrigger>Item One</{{codeConfig.prefix}}NavigationMenuTrigger>
<NavigationMenuContent> <{{codeConfig.prefix}}NavigationMenuContent>
<NavigationMenuLink>Link</NavigationMenuLink> <{{codeConfig.prefix}}NavigationMenuLink>Link</{{codeConfig.prefix}}NavigationMenuLink>
</NavigationMenuContent> </{{codeConfig.prefix}}NavigationMenuContent>
</NavigationMenuItem> </{{codeConfig.prefix}}NavigationMenuItem>
</NavigationMenuList> </{{codeConfig.prefix}}NavigationMenuList>
</NavigationMenu> </{{codeConfig.prefix}}NavigationMenu>
</template> </template>
``` ```

27
apps/www/src/content/docs/components/popover.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/popover
primitive: https://www.radix-vue.com/components/popover.html primitive: https://www.radix-vue.com/components/popover.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="PopoverDemo" /> <ComponentPreview name="PopoverDemo" />
@ -17,21 +24,21 @@ npx shadcn-vue@latest add popover
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
Popover, {{codeConfig.prefix}}Popover,
PopoverContent, {{codeConfig.prefix}}PopoverContent,
PopoverTrigger, {{codeConfig.prefix}}PopoverTrigger,
} from '@/components/ui/popover' } from '{{codeConfig.aliases.components}}/ui/popover'
</script> </script>
<template> <template>
<Popover> <{{codeConfig.prefix}}Popover>
<PopoverTrigger> <{{codeConfig.prefix}}PopoverTrigger>
Open popover Open popover
</PopoverTrigger> </{{codeConfig.prefix}}PopoverTrigger>
<PopoverContent /> <{{codeConfig.prefix}}PopoverContent>...</{{codeConfig.prefix}}PopoverContent>
</Popover> </{{codeConfig.prefix}}Popover>
</template> </template>
``` ```

13
apps/www/src/content/docs/components/progress.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/progress
primitive: https://www.radix-vue.com/components/progress.html primitive: https://www.radix-vue.com/components/progress.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="ProgressDemo" /> <ComponentPreview name="ProgressDemo" />
@ -40,12 +47,12 @@ npm install radix-vue
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Progress } from '@/components/ui/progress' import { {{codeConfig.prefix}}Progress } from '{{codeConfig.aliases.components}}/ui/progress'
</script> </script>
<template> <template>
<Progress :model-value="33" /> <{{codeConfig.prefix}}Progress :model-value="33" />
</template> </template>
``` ```

25
apps/www/src/content/docs/components/radio-group.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/radio-group
primitive: https://www.radix-vue.com/components/radio-group.html primitive: https://www.radix-vue.com/components/radio-group.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="RadioGroupDemo" /> <ComponentPreview name="RadioGroupDemo" />
## Installation ## Installation
@ -16,23 +23,23 @@ npx shadcn-vue@latest add radio-group
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Label } from '@/components/ui/label' import { {{codeConfig.prefix}}Label } from '{{codeConfig.aliases.components}}/ui/label'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group' import { {{codeConfig.prefix}}RadioGroup, RadioGroupItem } from '{{codeConfig.aliases.components}}/ui/radio-group'
</script> </script>
<template> <template>
<RadioGroup default-value="option-one"> <{{codeConfig.prefix}}RadioGroup default-value="option-one">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<RadioGroupItem id="option-one" value="option-one" /> <{{codeConfig.prefix}}RadioGroupItem id="option-one" value="option-one" />
<Label for="option-one">Option One</Label> <{{codeConfig.prefix}}Label for="option-one">Option One</{{codeConfig.prefix}}Label>
</div> </div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<RadioGroupItem id="option-two" value="option-two" /> <{{codeConfig.prefix}}RadioGroupItem id="option-two" value="option-two" />
<Label for="option-two">Option Two</Label> <{{codeConfig.prefix}}Label for="option-two">Option Two</{{codeConfig.prefix}}Label>
</div> </div>
</RadioGroup> </{{codeConfig.prefix}}RadioGroup>
</template> </template>
``` ```

15
apps/www/src/content/docs/components/scroll-area.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/scroll-area
primitive: https://www.radix-vue.com/components/scroll-area.html primitive: https://www.radix-vue.com/components/scroll-area.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="ScrollAreaDemo" /> <ComponentPreview name="ScrollAreaDemo" />
## Installation ## Installation
@ -15,20 +22,20 @@ npx shadcn-vue@latest add scroll-area
``` ```
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { ScrollArea } from '@/components/ui/scroll-area' import { {{codeConfig.prefix}}ScrollArea } from '{{codeConfig.aliases.components}}/ui/scroll-area'
</script> </script>
<template> <template>
<ScrollArea class="h-[200px] w-[350px] rounded-md border p-4"> <{{codeConfig.prefix}}ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
Jokester began sneaking into the castle in the middle of the night and leaving Jokester began sneaking into the castle in the middle of the night and leaving
jokes all over the place: under the king's pillow, in his soup, even in the jokes all over the place: under the king's pillow, in his soup, even in the
royal toilet. The king was furious, but he couldn't seem to stop Jokester. And royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
then, one day, the people of the kingdom discovered that the jokes left by then, one day, the people of the kingdom discovered that the jokes left by
Jokester were so funny that they couldn't help but laugh. And once they Jokester were so funny that they couldn't help but laugh. And once they
started laughing, they couldn't stop. started laughing, they couldn't stop.
</ScrollArea> </{{codeConfig.prefix}}ScrollArea>
</template> </template>
``` ```

48
apps/www/src/content/docs/components/select.md
View File

@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/select
primitive: https://www.radix-vue.com/components/select.html primitive: https://www.radix-vue.com/components/select.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="SelectDemo" /> <ComponentPreview name="SelectDemo" />
@ -17,33 +23,33 @@ npx shadcn-vue@latest add select
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
Select, {{codeConfig.prefix}}Select,
SelectContent, {{codeConfig.prefix}}SelectContent,
SelectGroup, {{codeConfig.prefix}}SelectGroup,
SelectItem, {{codeConfig.prefix}}SelectItem,
SelectLabel, {{codeConfig.prefix}}SelectLabel,
SelectTrigger, {{codeConfig.prefix}}SelectTrigger,
SelectValue, {{codeConfig.prefix}}SelectValue,
} from '@/components/ui/select' } from '{{codeConfig.aliases.components}}/ui/select'
</script> </script>
<template> <template>
<Select> <{{codeConfig.prefix}}Select>
<SelectTrigger> <{{codeConfig.prefix}}SelectTrigger>
<SelectValue placeholder="Select a fruit" /> <{{codeConfig.prefix}}SelectValue placeholder="Select a fruit" />
</SelectTrigger> </{{codeConfig.prefix}}SelectTrigger>
<SelectContent> <{{codeConfig.prefix}}SelectContent>
<SelectGroup> <{{codeConfig.prefix}}SelectGroup>
<SelectLabel>Fruits</SelectLabel> <{{codeConfig.prefix}}SelectLabel>Fruits</{{codeConfig.prefix}}SelectLabel>
<SelectItem value="apple"> <{{codeConfig.prefix}}SelectItem value="apple">
Apple Apple
</SelectItem> </{{codeConfig.prefix}}SelectItem>
</SelectGroup> </{{codeConfig.prefix}}SelectGroup>
</SelectContent> </{{codeConfig.prefix}}SelectContent>
</Select> </{{codeConfig.prefix}}Select>
</template> </template>
``` ```

13
apps/www/src/content/docs/components/separator.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/separator
primitive: https://www.radix-vue.com/components/separator.html primitive: https://www.radix-vue.com/components/separator.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="SeparatorDemo" /> <ComponentPreview name="SeparatorDemo" />
@ -40,12 +47,12 @@ npm install radix-vue
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Separator } from '@/components/ui/separator' import { {{codeConfig.prefix}}Separator } from '{{codeConfig.aliases.components}}/ui/separator'
</script> </script>
<template> <template>
<Separator /> <{{codeConfig.prefix}}Separator />
</template> </template>
``` ```

43
apps/www/src/content/docs/components/sheet.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/dialog
primitive: https://www.radix-vue.com/components/dialog.html primitive: https://www.radix-vue.com/components/dialog.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="SheetDemo" /> <ComponentPreview name="SheetDemo" />
@ -16,31 +23,31 @@ npx shadcn-vue@latest add sheet
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
Sheet, {{codeConfig.prefix}}Sheet,
SheetContent, {{codeConfig.prefix}}SheetContent,
SheetDescription, {{codeConfig.prefix}}SheetDescription,
SheetHeader, {{codeConfig.prefix}}SheetHeader,
SheetTitle, {{codeConfig.prefix}}SheetTitle,
SheetTrigger, {{codeConfig.prefix}}SheetTrigger,
} from '@/components/ui/sheet' } from '{{codeConfig.aliases.components}}/ui/sheet'
</script> </script>
<template> <template>
<Sheet> <{{codeConfig.prefix}}Sheet>
<SheetTrigger>Open</SheetTrigger> <{{codeConfig.prefix}}SheetTrigger>Open</{{codeConfig.prefix}}SheetTrigger>
<SheetContent> <{{codeConfig.prefix}}SheetContent>
<SheetHeader> <{{codeConfig.prefix}}SheetHeader>
<SheetTitle>Are you sure absolutely sure?</SheetTitle> <{{codeConfig.prefix}}SheetTitle>Are you sure absolutely sure?</{{codeConfig.prefix}}SheetTitle>
<SheetDescription> <{{codeConfig.prefix}}SheetDescription>
This action cannot be undone. This will permanently delete your account This action cannot be undone. This will permanently delete your account
and remove your data from our servers. and remove your data from our servers.
</SheetDescription> </{{codeConfig.prefix}}SheetDescription>
</SheetHeader> </{{codeConfig.prefix}}SheetHeader>
</SheetContent> </{{codeConfig.prefix}}SheetContent>
</Sheet> </{{codeConfig.prefix}}Sheet>
</template> </template>
``` ```

13
apps/www/src/content/docs/components/skeleton.md
View File

@ -3,6 +3,13 @@ title: Skeleton
description: Use to show a placeholder while content is loading. description: Use to show a placeholder while content is loading.
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="SkeletonDemo" /> <ComponentPreview name="SkeletonDemo" />
## Installation ## Installation
@ -31,12 +38,12 @@ npx shadcn-vue@latest add skeleton
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Skeleton } from '@/components/ui/skeleton' import { {{codeConfig.prefix}}Skeleton } from '{{codeConfig.aliases.components}}/ui/skeleton'
</script> </script>
<template> <template>
<Skeleton class="w-[100px] h-[20px] rounded-full" /> <{{codeConfig.prefix}}Skeleton class="w-[100px] h-[20px] rounded-full" />
</template> </template>
``` ```

15
apps/www/src/content/docs/components/slider.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/slider
primitive: https://www.radix-vue.com/components/slider.html primitive: https://www.radix-vue.com/components/slider.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="SliderDemo" /> <ComponentPreview name="SliderDemo" />
## Installation ## Installation
@ -15,14 +22,12 @@ npx shadcn-vue@latest add slider
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Slider } from '@/components/ui/slider' import { {{codeConfig.prefix}}Slider } from '{{codeConfig.aliases.components}}/ui/slider'
</script> </script>
<template> <template>
<Slider <{{codeConfig.prefix}}Slider :default-value="[33]" :max="100" :step="1" />
:default-value="[33]" :max="100" :step="1"
/>
</template> </template>
``` ```

13
apps/www/src/content/docs/components/switch.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/switch
primitive: https://www.radix-vue.com/components/switch.html primitive: https://www.radix-vue.com/components/switch.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="SwitchDemo" /> <ComponentPreview name="SwitchDemo" />
@ -39,13 +46,13 @@ npm install radix-vue
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Switch } from '@/components/ui/switch' import { {{codeConfig.prefix}}Switch } from '{{codeConfig.aliases.components}}/ui/switch'
</script> </script>
<template> <template>
<Switch /> <{{codeConfig.prefix}}Switch />
</template> </template>
``` ```

71
apps/www/src/content/docs/components/table.md
View File

@ -3,6 +3,13 @@ title: Table
description: A responsive table component. description: A responsive table component.
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="TableDemo" /> <ComponentPreview name="TableDemo" />
@ -14,47 +21,47 @@ npx shadcn-vue@latest add table
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
Table, {{codeConfig.prefix}}Table,
TableBody, {{codeConfig.prefix}}TableBody,
TableCaption, {{codeConfig.prefix}}TableCaption,
TableCell, {{codeConfig.prefix}}TableCell,
TableHead, {{codeConfig.prefix}}TableHead,
TableHeader, {{codeConfig.prefix}}TableHeader,
TableRow, {{codeConfig.prefix}}TableRow,
} from '@/components/ui/table' } from '{{codeConfig.aliases.components}}/ui/table'
</script> </script>
<template> <template>
<Table> <{{codeConfig.prefix}}Table>
<TableCaption>A list of your recent invoices.</TableCaption> <{{codeConfig.prefix}}TableCaption>A list of your recent invoices.</{{codeConfig.prefix}}TableCaption>
<TableHeader> <{{codeConfig.prefix}}TableHeader>
<TableRow> <{{codeConfig.prefix}}TableRow>
<TableHead class="w-[100px]"> <{{codeConfig.prefix}}TableHead class="w-[100px]">
Invoice Invoice
</TableHead> </{{codeConfig.prefix}}TableHead>
<TableHead>Status</TableHead> <{{codeConfig.prefix}}TableHead>Status</{{codeConfig.prefix}}TableHead>
<TableHead>Method</TableHead> <{{codeConfig.prefix}}TableHead>Method</{{codeConfig.prefix}}TableHead>
<TableHead class="text-right"> <{{codeConfig.prefix}}TableHead class="text-right">
Amount Amount
</TableHead> </{{codeConfig.prefix}}TableHead>
</TableRow> </{{codeConfig.prefix}}TableRow>
</TableHeader> </{{codeConfig.prefix}}TableHeader>
<TableBody> <{{codeConfig.prefix}}TableBody>
<TableRow> <{{codeConfig.prefix}}TableRow>
<TableCell class="font-medium"> <{{codeConfig.prefix}}TableCell class="font-medium">
INV001 INV001
</TableCell> </{{codeConfig.prefix}}TableCell>
<TableCell>Paid</TableCell> <{{codeConfig.prefix}}TableCell>Paid</{{codeConfig.prefix}}TableCell>
<TableCell>Credit Card</TableCell> <{{codeConfig.prefix}}TableCell>Credit Card</{{codeConfig.prefix}}TableCell>
<TableCell class="text-right"> <{{codeConfig.prefix}}TableCell class="text-right">
$250.00 $250.00
</TableCell> </{{codeConfig.prefix}}TableCell>
</TableRow> </{{codeConfig.prefix}}TableRow>
</TableBody> </{{codeConfig.prefix}}TableBody>
</Table> </{{codeConfig.prefix}}Table>
</template> </template>
``` ```

35
apps/www/src/content/docs/components/tabs.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/tabs
primitive: https://www.radix-vue.com/components/tabs.html primitive: https://www.radix-vue.com/components/tabs.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="TabsDemo" /> <ComponentPreview name="TabsDemo" />
@ -18,27 +25,27 @@ npx shadcn-vue@latest add tabs
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { {{codeConfig.prefix}}Tabs, {{codeConfig.prefix}}TabsContent, {{codeConfig.prefix}}TabsList, {{codeConfig.prefix}}TabsTrigger } from '{{codeConfig.aliases.components}}/ui/tabs'
</script> </script>
<template> <template>
<Tabs default-value="account" class="w-[400px]"> <{{codeConfig.prefix}}Tabs default-value="account" class="w-[400px]">
<TabsList> <{{codeConfig.prefix}}TabsList>
<TabsTrigger value="account"> <{{codeConfig.prefix}}TabsTrigger value="account">
Account Account
</TabsTrigger> </{{codeConfig.prefix}}TabsTrigger>
<TabsTrigger value="password"> <{{codeConfig.prefix}}TabsTrigger value="password">
Password Password
</TabsTrigger> </{{codeConfig.prefix}}TabsTrigger>
</TabsList> </{{codeConfig.prefix}}TabsList>
<TabsContent value="account"> <{{codeConfig.prefix}}TabsContent value="account">
Make changes to your account here. Make changes to your account here.
</TabsContent> </{{codeConfig.prefix}}TabsContent>
<TabsContent value="password"> <{{codeConfig.prefix}}TabsContent value="password">
Change your password here. Change your password here.
</TabsContent> </{{codeConfig.prefix}}TabsContent>
</Tabs> </{{codeConfig.prefix}}Tabs>
</template> </template>
``` ```

13
apps/www/src/content/docs/components/textarea.md
View File

@ -3,6 +3,13 @@ title: Textarea
description: Displays a form textarea or a component that looks like a textarea. description: Displays a form textarea or a component that looks like a textarea.
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="TextareaDemo" /> <ComponentPreview name="TextareaDemo" />
@ -37,13 +44,13 @@ npm install radix-vue
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Textarea } from '@/components/ui/textarea' import { {{codeConfig.prefix}}Textarea } from '{{codeConfig.aliases.components}}/ui/textarea'
</script> </script>
<template> <template>
<Textarea /> <{{codeConfig.prefix}}Textarea />
</template> </template>
``` ```

20
apps/www/src/content/docs/components/toast.md
View File

@ -5,6 +5,12 @@ source: apps/www/src/lib/registry/default/ui/toast
primitive: https://www.radix-vue.com/components/toast.html primitive: https://www.radix-vue.com/components/toast.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="ToastDemo" /> <ComponentPreview name="ToastDemo" />
@ -40,20 +46,20 @@ import Toaster from '@/components/ui/toast/Toaster.vue'
The `useToast` hook returns a `toast` function that you can use to display a toast. The `useToast` hook returns a `toast` function that you can use to display a toast.
```tsx ```tsx-vue
import { useToast } from '@/components/ui/toast/use-toast' import { useToast } from '{{codeConfig.aliases.components}}/ui/toast/use-toast'
``` ```
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Button } from '@/components/ui/button' import { {{codeConfig.prefix}}Button } from '{{codeConfig.aliases.components}}/ui/button'
import { useToast } from '@/components/ui/toast/use-toast' import { useToast } from '{{codeConfig.aliases.components}}/ui/toast/use-toast'
const { toast } = useToast() const { toast } = useToast()
</script> </script>
<template> <template>
<Button <{{codeConfig.prefix}}Button
@click="() => { @click="() => {
toast({ toast({
title: 'Scheduled: Catch up', title: 'Scheduled: Catch up',
@ -62,7 +68,7 @@ const { toast } = useToast()
}" }"
> >
Add to calander Add to calander
</Button> </{{codeConfig.prefix}}Button>
</template> </template>
``` ```

13
apps/www/src/content/docs/components/toggle.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/toggle
primitive: https://www.radix-vue.com/components/toggle.html primitive: https://www.radix-vue.com/components/toggle.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="ToggleDemo" /> <ComponentPreview name="ToggleDemo" />
@ -40,13 +47,13 @@ npm install radix-vue
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { Toggle } from '@/components/ui/toggle' import { {{codeConfig.prefix}}Toggle } from '{{codeConfig.aliases.components}}/ui/toggle'
</script> </script>
<template> <template>
<Toggle>Toggle</Toggle> <{{codeConfig.prefix}}Toggle>Toggle</{{codeConfig.prefix}}Toggle>
</template> </template>
``` ```

33
apps/www/src/content/docs/components/tooltip.md
View File

@ -5,6 +5,13 @@ source: apps/www/src/lib/registry/default/ui/tooltip
primitive: https://www.radix-vue.com/components/tooltip.html primitive: https://www.radix-vue.com/components/tooltip.html
--- ---
<script setup>
import { useConfigStore } from '@/stores/config'
const { codeConfig } = useConfigStore()
</script>
<ComponentPreview name="TooltipDemo" /> <ComponentPreview name="TooltipDemo" />
@ -16,24 +23,24 @@ npx shadcn-vue@latest add tooltip
## Usage ## Usage
```vue ```vue-vue
<script setup lang="ts"> <script setup lang="ts">
import { import {
Tooltip, {{codeConfig.prefix}}Tooltip,
TooltipContent, {{codeConfig.prefix}}TooltipContent,
TooltipProvider, {{codeConfig.prefix}}TooltipProvider,
TooltipTrigger {{codeConfig.prefix}}TooltipTrigger
} from '@/components/ui/tooltip' } from '{{codeConfig.aliases.components}}/ui/tooltip'
</script> </script>
<template> <template>
<TooltipProvider> <{{codeConfig.prefix}}TooltipProvider>
<Tooltip> <{{codeConfig.prefix}}Tooltip>
<TooltipTrigger>Hover</TooltipTrigger> <{{codeConfig.prefix}}TooltipTrigger>Hover</{{codeConfig.prefix}}TooltipTrigger>
<TooltipContent> <{{codeConfig.prefix}}TooltipContent>
<p>Add to library</p> <p>Add to library</p>
</TooltipContent> </{{codeConfig.prefix}}TooltipContent>
</Tooltip> </{{codeConfig.prefix}}Tooltip>
</TooltipProvider> </{{codeConfig.prefix}}TooltipProvider>
</template> </template>
``` ```

15
apps/www/src/stores/config.ts
View File

@ -1,5 +1,5 @@
import { computed } from 'vue' import { computed } from 'vue'
import { useSessionStorage } from '@vueuse/core' import { useLocalStorage, useSessionStorage } from '@vueuse/core'
import { useData } from 'vitepress' import { useData } from 'vitepress'
import { type Theme, themes } from './../lib/registry/themes' import { type Theme, themes } from './../lib/registry/themes'
import { type Style, styles } from '@/lib/registry/styles' import { type Style, styles } from '@/lib/registry/styles'
@ -14,12 +14,21 @@ export const RADII = [0, 0.25, 0.5, 0.75, 1]
export function useConfigStore() { export function useConfigStore() {
const { isDark } = useData() const { isDark } = useData()
const config = useSessionStorage<Config>('config', {
const config = useLocalStorage<Config>('config', {
theme: 'zinc', theme: 'zinc',
radius: 0.5, radius: 0.5,
style: styles[0].name, style: styles[0].name,
}) })
const codeConfig = useLocalStorage('code-config', {
prefix: '',
aliases: {
components: '@/components',
utils: '@/lib/utils',
},
})
const themeClass = computed(() => `theme-${config.value.theme}`) const themeClass = computed(() => `theme-${config.value.theme}`)
const theme = computed(() => config.value.theme) const theme = computed(() => config.value.theme)
@ -41,5 +50,5 @@ export function useConfigStore() {
})` })`
}) })
return { config, theme, setTheme, radius, setRadius, themeClass, style, themePrimary } return { config, theme, setTheme, radius, setRadius, themeClass, style, themePrimary, codeConfig }
} }