diff --git a/.vscode/settings.json b/.vscode/settings.json index 47b2103ff..c9442fbf8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,5 @@ { + "vue.server.hybridMode": true, "eslint.experimental.useFlatConfig": true, "prettier.enable": false, "editor.formatOnSave": false, diff --git a/apps/www/.vitepress/theme/components/Logo.vue b/apps/www/.vitepress/theme/components/Logo.vue index 3d0b82522..3acb528c6 100644 --- a/apps/www/.vitepress/theme/components/Logo.vue +++ b/apps/www/.vitepress/theme/components/Logo.vue @@ -2,7 +2,7 @@ ``` - diff --git a/apps/www/src/content/docs/components/alert-dialog.md b/apps/www/src/content/docs/components/alert-dialog.md index 73ea6da1e..c53aeab49 100644 --- a/apps/www/src/content/docs/components/alert-dialog.md +++ b/apps/www/src/content/docs/components/alert-dialog.md @@ -1,21 +1,18 @@ --- title: Alert Dialog description: A modal dialog that interrupts the user with important content and expects a response. -source: apps/www/src/lib/registry/default/ui/alert-dialog +source: apps/www/src/lib/registry/default/ui/alert-dialog primitive: https://www.radix-vue.com/components/alert-dialog.html --- - - + - -## Installation - +## Installation ```bash npx shadcn-vue@latest add alert-dialog ``` - + ## Usage ```vue @@ -51,4 +48,4 @@ import { -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/alert.md b/apps/www/src/content/docs/components/alert.md index 13d9d6094..0e0c7ad64 100644 --- a/apps/www/src/content/docs/components/alert.md +++ b/apps/www/src/content/docs/components/alert.md @@ -3,16 +3,14 @@ title: Alert description: Displays a callout for user attention. --- - - + ## Installation - ```bash npx shadcn-vue@latest add alert ``` - + ## Usage ```vue @@ -34,11 +32,8 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' ### Default - - + ### Destructive - - - + diff --git a/apps/www/src/content/docs/components/aspect-ratio.md b/apps/www/src/content/docs/components/aspect-ratio.md index ec6475d96..57ec62a7a 100644 --- a/apps/www/src/content/docs/components/aspect-ratio.md +++ b/apps/www/src/content/docs/components/aspect-ratio.md @@ -1,11 +1,10 @@ --- title: Aspect Ratio description: Displays content within a desired ratio. -source: apps/www/src/lib/registry/default/ui/aspect-ratio +source: apps/www/src/lib/registry/default/ui/aspect-ratio primitive: https://www.radix-vue.com/components/aspect-ratio.html --- - ## Installation @@ -51,4 +50,4 @@ import { AspectRatio } from '@/components/ui/aspect-ratio' -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/avatar.md b/apps/www/src/content/docs/components/avatar.md index 0f1dbdefb..ae7668fd6 100644 --- a/apps/www/src/content/docs/components/avatar.md +++ b/apps/www/src/content/docs/components/avatar.md @@ -1,20 +1,17 @@ --- title: Avatar description: An image element with a fallback for representing the user. -source: apps/www/src/lib/registry/default/ui/avatar +source: apps/www/src/lib/registry/default/ui/avatar primitive: https://www.radix-vue.com/components/avatar.html --- - - - + ## Installation - ```bash npx shadcn-vue@latest add avatar -``` +``` ## Usage @@ -29,4 +26,4 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' CN -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/badge.md b/apps/www/src/content/docs/components/badge.md index 08b8b030c..714ba2cbb 100644 --- a/apps/www/src/content/docs/components/badge.md +++ b/apps/www/src/content/docs/components/badge.md @@ -3,8 +3,7 @@ title: Badge description: Displays a badge or a component that looks like a badge. --- - - + ## Installation @@ -80,13 +79,11 @@ import { Badge } from '@/components/ui/badge' ``` - ## Examples ### Default - - + ### Secondary @@ -98,4 +95,4 @@ import { Badge } from '@/components/ui/badge' ### Destructive - \ No newline at end of file + diff --git a/apps/www/src/content/docs/components/button.md b/apps/www/src/content/docs/components/button.md index 3fb5d55ef..d02a53573 100644 --- a/apps/www/src/content/docs/components/button.md +++ b/apps/www/src/content/docs/components/button.md @@ -3,8 +3,7 @@ title: Button description: Displays a button or a component that looks like a button. --- - - + ## Installation @@ -94,24 +93,20 @@ import { Button } from '@/components/ui/button' ``` - ## Examples ### Primary - - + ### Secondary - ### Destructive - ### Outline @@ -138,4 +133,4 @@ import { Button } from '@/components/ui/button' ### As Child - \ No newline at end of file + diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md index ab0dff471..416aa0f8a 100644 --- a/apps/www/src/content/docs/components/calendar.md +++ b/apps/www/src/content/docs/components/calendar.md @@ -1,12 +1,11 @@ --- title: Calendar description: A date field component that allows users to enter and edit date. -source: apps/www/src/lib/registry/default/ui/calendar +source: apps/www/src/lib/registry/default/ui/calendar primitive: https://vcalendar.io/ --- - - + ## About @@ -34,13 +33,10 @@ npm install v-calendar ### Copy and paste the following code into your project - <<< @/lib/registry/default/ui/calendar/Calendar.vue - - @@ -92,4 +88,4 @@ import { Calendar } from '@/components/ui/calendar' -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/card.md b/apps/www/src/content/docs/components/card.md index 512d17618..dd11d35c9 100644 --- a/apps/www/src/content/docs/components/card.md +++ b/apps/www/src/content/docs/components/card.md @@ -3,16 +3,13 @@ title: Card description: Displays a card with header, content, and footer. --- - - + ## Installation - - ```bash npx shadcn-vue@latest add card -``` +``` ## Usage @@ -46,4 +43,4 @@ import { ## Examples - \ No newline at end of file + diff --git a/apps/www/src/content/docs/components/checkbox.md b/apps/www/src/content/docs/components/checkbox.md index 07697e6ee..283d1fe41 100644 --- a/apps/www/src/content/docs/components/checkbox.md +++ b/apps/www/src/content/docs/components/checkbox.md @@ -1,20 +1,17 @@ --- title: Checkbox description: A control that allows the user to toggle between checked and not checked. -source: apps/www/src/lib/registry/default/ui/checkbox +source: apps/www/src/lib/registry/default/ui/checkbox primitive: https://www.radix-vue.com/components/checkbox.html --- - - - + ## Installation - ```bash npx shadcn-vue@latest add checkbox -``` +``` ## Usage diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md index 19f327393..185601d4d 100644 --- a/apps/www/src/content/docs/components/collapsible.md +++ b/apps/www/src/content/docs/components/collapsible.md @@ -1,23 +1,21 @@ ---- +--- title: Collapsible description: An interactive component which expands/collapses a panel. -source: apps/www/src/lib/registry/default/ui/collapsible +source: apps/www/src/lib/registry/default/ui/collapsible primitive: https://www.radix-vue.com/components/collapsible.html --- - - + ## Installation - ### Run the following command ```bash npx shadcn-vue@latest add collapsible -``` +``` ### Update `tailwind.config.js` @@ -46,9 +44,8 @@ module.exports = { }, } ``` - - + ## Usage @@ -73,4 +70,4 @@ const isOpen = ref(false) -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md index eb77f9b6a..f059004da 100644 --- a/apps/www/src/content/docs/components/command.md +++ b/apps/www/src/content/docs/components/command.md @@ -1,21 +1,17 @@ --- title: Command description: Fast, composable, unstyled command menu. -source: apps/www/src/lib/registry/default/ui/command +source: apps/www/src/lib/registry/default/ui/command primitive: https://www.radix-vue.com/components/combobox.html --- - - - - + ## Installation - ```bash npx shadcn-vue@latest add command -``` +``` ## Usage ```vue @@ -66,9 +62,9 @@ import { ``` -## Examples +## Examples -### Dialog +### Dialog diff --git a/apps/www/src/content/docs/components/context-menu.md b/apps/www/src/content/docs/components/context-menu.md index 13bc11ec0..cc718ce89 100644 --- a/apps/www/src/content/docs/components/context-menu.md +++ b/apps/www/src/content/docs/components/context-menu.md @@ -1,18 +1,17 @@ ---- +--- title: Context Menu description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. -source: apps/www/src/lib/registry/default/ui/context-menu +source: apps/www/src/lib/registry/default/ui/context-menu primitive: https://www.radix-vue.com/components/context-menu.html --- - - + ## Installation - + ```bash npx shadcn-vue@latest add context-menu -``` +``` ## Usage @@ -46,4 +45,4 @@ import { -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md index 3fbdc5633..7416c51c6 100644 --- a/apps/www/src/content/docs/components/date-picker.md +++ b/apps/www/src/content/docs/components/date-picker.md @@ -3,8 +3,7 @@ title: Date Picker description: A date picker component with range and presets. --- - - + ## Installation @@ -53,7 +52,6 @@ const date = ref() ``` - ## Examples ### Date Picker diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md index 5c407e193..de448dbb4 100644 --- a/apps/www/src/content/docs/components/dialog.md +++ b/apps/www/src/content/docs/components/dialog.md @@ -1,13 +1,12 @@ --- title: Dialog description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. -source: apps/www/src/lib/registry/default/ui/dialog +source: apps/www/src/lib/registry/default/ui/dialog primitive: https://www.radix-vue.com/components/dialog.html --- + - - ## Installation ```bash npx shadcn-vue@latest add dialog @@ -49,11 +48,11 @@ import { ``` -## Examples +## Examples ### Custom close button - + ### Scroll body @@ -67,7 +66,6 @@ import { To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or `Dropdown Menu` component in the `Dialog` component. For more information, refer to the linked issue [here](https://github.com/radix-ui/primitives/issues/1836). - ```js:line-numbers showLineNumber{14-25} diff --git a/apps/www/src/content/docs/components/form.md b/apps/www/src/content/docs/components/form.md index 955586e97..1bb4cf7fc 100644 --- a/apps/www/src/content/docs/components/form.md +++ b/apps/www/src/content/docs/components/form.md @@ -16,12 +16,10 @@ Well-designed HTML forms are: In this guide, we will take a look at building forms with [`vee-validate`](https://vee-validate.logaretm.com/v4/) and [`zod`](https://zod.dev). We're going to use a `` component to compose accessible forms using Radix Vue components. - ## Features The `
` component is a wrapper around the `vee-validate` library. It provides a few things: - - Composable components for building forms. - A `` component for building controlled form fields. - Form validation using `zod`. @@ -53,7 +51,6 @@ The `` component is a wrapper around the `vee-validate` library. It prov ## Example - -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/navigation-menu.md b/apps/www/src/content/docs/components/navigation-menu.md index e8530cf64..f1748f576 100644 --- a/apps/www/src/content/docs/components/navigation-menu.md +++ b/apps/www/src/content/docs/components/navigation-menu.md @@ -1,13 +1,13 @@ --- title: Navigation Menu description: A collection of links for navigating websites. -source: apps/www/src/lib/registry/default/ui/navigation-menu +source: apps/www/src/lib/registry/default/ui/navigation-menu primitive: https://www.radix-vue.com/components/navigation-menu.html --- - + -## Installation +## Installation ```bash npx shadcn-vue@latest add navigation-menu @@ -43,7 +43,7 @@ import { ``` -## Examples +## Examples ### Link Component @@ -64,4 +64,3 @@ import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu' ``` - diff --git a/apps/www/src/content/docs/components/pagination.md b/apps/www/src/content/docs/components/pagination.md index 16d1429f6..cdc75bcea 100644 --- a/apps/www/src/content/docs/components/pagination.md +++ b/apps/www/src/content/docs/components/pagination.md @@ -5,15 +5,14 @@ source: apps/www/src/lib/registry/default/ui/pagination primitive: https://www.radix-vue.com/components/pagination.html --- - + ## Installation - ```bash npx shadcn-vue@latest add pagination ``` - + ## Usage ```vue diff --git a/apps/www/src/content/docs/components/popover.md b/apps/www/src/content/docs/components/popover.md index 4a19b82e8..782637503 100644 --- a/apps/www/src/content/docs/components/popover.md +++ b/apps/www/src/content/docs/components/popover.md @@ -1,16 +1,14 @@ --- title: Popover description: Displays rich content in a portal, triggered by a button. -source: apps/www/src/lib/registry/default/ui/popover +source: apps/www/src/lib/registry/default/ui/popover primitive: https://www.radix-vue.com/components/popover.html --- - - + ## Installation - ```bash npx shadcn-vue@latest add popover ``` @@ -34,4 +32,4 @@ import { -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/progress.md b/apps/www/src/content/docs/components/progress.md index bb1515a69..98afe907c 100644 --- a/apps/www/src/content/docs/components/progress.md +++ b/apps/www/src/content/docs/components/progress.md @@ -1,13 +1,11 @@ --- title: Progress description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. -source: apps/www/src/lib/registry/default/ui/progress +source: apps/www/src/lib/registry/default/ui/progress primitive: https://www.radix-vue.com/components/progress.html --- - - - + ## Installation @@ -48,4 +46,4 @@ import { Progress } from '@/components/ui/progress' -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md index 9dbbabbf3..dc6b3a2c6 100644 --- a/apps/www/src/content/docs/components/radio-group.md +++ b/apps/www/src/content/docs/components/radio-group.md @@ -1,15 +1,14 @@ --- title: Radio Group description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. -source: apps/www/src/lib/registry/default/ui/radio-group +source: apps/www/src/lib/registry/default/ui/radio-group primitive: https://www.radix-vue.com/components/radio-group.html --- - + ## Installation - ```bash npx shadcn-vue@latest add radio-group ``` diff --git a/apps/www/src/content/docs/components/scroll-area.md b/apps/www/src/content/docs/components/scroll-area.md index edac7a4cf..671cc2262 100644 --- a/apps/www/src/content/docs/components/scroll-area.md +++ b/apps/www/src/content/docs/components/scroll-area.md @@ -1,15 +1,14 @@ --- title: Scroll-area description: Augments native scroll functionality for custom, cross-browser styling. -source: apps/www/src/lib/registry/default/ui/scroll-area +source: apps/www/src/lib/registry/default/ui/scroll-area primitive: https://www.radix-vue.com/components/scroll-area.html --- - + ## Installation - ```bash npx shadcn-vue@latest add scroll-area ``` @@ -37,4 +36,3 @@ import { ScrollArea } from '@/components/ui/scroll-area' ### Horizontal Scrolling - diff --git a/apps/www/src/content/docs/components/separator.md b/apps/www/src/content/docs/components/separator.md index 3e0bc2815..898bc9c89 100644 --- a/apps/www/src/content/docs/components/separator.md +++ b/apps/www/src/content/docs/components/separator.md @@ -1,12 +1,11 @@ --- title: Separator description: Visually or semantically separates content. -source: apps/www/src/lib/registry/default/ui/separator +source: apps/www/src/lib/registry/default/ui/separator primitive: https://www.radix-vue.com/components/separator.html --- - - + ## Installation @@ -32,7 +31,6 @@ npm install radix-vue <<< @/lib/registry/default/ui/separator/Separator.vue - @@ -48,4 +46,4 @@ import { Separator } from '@/components/ui/separator' -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md index 6d2e90acb..4447d310b 100644 --- a/apps/www/src/content/docs/components/sheet.md +++ b/apps/www/src/content/docs/components/sheet.md @@ -1,15 +1,14 @@ --- title: Sheet description: Extends the Dialog component to display content that complements the main content of the screen. -source: apps/www/src/lib/registry/default/ui/sheet +source: apps/www/src/lib/registry/default/ui/sheet primitive: https://www.radix-vue.com/components/dialog.html --- - - + ## Installation - + ```bash npx shadcn-vue@latest add sheet ``` @@ -50,8 +49,7 @@ import { Use the `side` property to `` to indicate the edge of the screen where the component will appear. The values can be `top`, `right`, `bottom` or `left`. - - + ### Size diff --git a/apps/www/src/content/docs/components/sonner.md b/apps/www/src/content/docs/components/sonner.md index 792b43527..733276b01 100644 --- a/apps/www/src/content/docs/components/sonner.md +++ b/apps/www/src/content/docs/components/sonner.md @@ -2,7 +2,7 @@ title: Sonner description: An opinionated toast component for Vue. docs: https://vue-sonner.vercel.app -source: apps/www/src/lib/registry/default/ui/sonner +source: apps/www/src/lib/registry/default/ui/sonner --- @@ -34,7 +34,7 @@ import { Toaster } from '@/components/ui/sonner' ``` - + ## Usage diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md index a359a4df9..d1dbfd081 100644 --- a/apps/www/src/content/docs/components/switch.md +++ b/apps/www/src/content/docs/components/switch.md @@ -1,12 +1,11 @@ --- title: Switch description: A control that allows the user to toggle between checked and not checked. -source: apps/www/src/lib/registry/default/ui/switch +source: apps/www/src/lib/registry/default/ui/switch primitive: https://www.radix-vue.com/components/switch.html --- - - + ## Installation @@ -29,7 +28,7 @@ npm install radix-vue ``` ### Copy and paste the following code into your project - + <<< @/lib/registry/default/ui/switch/Switch.vue diff --git a/apps/www/src/content/docs/components/table.md b/apps/www/src/content/docs/components/table.md index e0701b581..8646b8557 100644 --- a/apps/www/src/content/docs/components/table.md +++ b/apps/www/src/content/docs/components/table.md @@ -3,8 +3,7 @@ title: Table description: A responsive table component. --- - - + ## Installation @@ -64,4 +63,4 @@ You can use the `` component to build more complex data tables. Combine See the [Data Table](/docs/components/data-table) documentation for more information. -You can also see an example of a data table in the [Tasks](/examples/tasks) demo. \ No newline at end of file +You can also see an example of a data table in the [Tasks](/examples/tasks) demo. diff --git a/apps/www/src/content/docs/components/tabs.md b/apps/www/src/content/docs/components/tabs.md index 317836e7a..416aee80c 100644 --- a/apps/www/src/content/docs/components/tabs.md +++ b/apps/www/src/content/docs/components/tabs.md @@ -1,17 +1,14 @@ --- title: Tabs description: A set of layered sections of content—known as tab panels—that are displayed one at a time. -source: apps/www/src/lib/registry/default/ui/tabs +source: apps/www/src/lib/registry/default/ui/tabs primitive: https://www.radix-vue.com/components/tabs.html --- - - + ## Installation - - ```bash npx shadcn-vue@latest add tabs ``` @@ -41,4 +38,4 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/tags-input.md b/apps/www/src/content/docs/components/tags-input.md index 4833e9671..97071831c 100644 --- a/apps/www/src/content/docs/components/tags-input.md +++ b/apps/www/src/content/docs/components/tags-input.md @@ -5,7 +5,7 @@ source: apps/www/src/lib/registry/default/ui/tags-input primitive: https://www.radix-vue.com/components/tags-input.html --- - + ## Installation @@ -13,9 +13,8 @@ primitive: https://www.radix-vue.com/components/tags-input.html npx shadcn-vue@latest add tags-input ``` - ## Usage ### Tags with Combobox - + diff --git a/apps/www/src/content/docs/components/textarea.md b/apps/www/src/content/docs/components/textarea.md index 930a77622..f82873ea0 100644 --- a/apps/www/src/content/docs/components/textarea.md +++ b/apps/www/src/content/docs/components/textarea.md @@ -3,8 +3,7 @@ title: Textarea description: Displays a form textarea or a component that looks like a textarea. --- - - + ## Installation diff --git a/apps/www/src/content/docs/components/toast.md b/apps/www/src/content/docs/components/toast.md index b2cc424ee..1514472b3 100644 --- a/apps/www/src/content/docs/components/toast.md +++ b/apps/www/src/content/docs/components/toast.md @@ -1,15 +1,13 @@ --- title: Toast description: A succinct message that is displayed temporarily. -source: apps/www/src/lib/registry/default/ui/toast +source: apps/www/src/lib/registry/default/ui/toast primitive: https://www.radix-vue.com/components/toast.html --- - ## Installation - @@ -32,9 +30,8 @@ import Toaster from '@/components/ui/toast/Toaster.vue' ``` - + - ## Usage diff --git a/apps/www/src/content/docs/components/toggle-group.md b/apps/www/src/content/docs/components/toggle-group.md index f622f630c..96a8f4635 100644 --- a/apps/www/src/content/docs/components/toggle-group.md +++ b/apps/www/src/content/docs/components/toggle-group.md @@ -5,7 +5,7 @@ source: apps/www/src/lib/registry/default/ui/toggle-group primitive: https://www.radix-vue.com/components/toggle-group.html --- - + ## Installation @@ -60,34 +60,26 @@ import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group' ## Examples -### Default - - +### Default + ### Outline - - + ### Single - ### Small - ### Large - ### Disabled - - - diff --git a/apps/www/src/content/docs/components/toggle.md b/apps/www/src/content/docs/components/toggle.md index c720bb3e4..5bd4ec11e 100644 --- a/apps/www/src/content/docs/components/toggle.md +++ b/apps/www/src/content/docs/components/toggle.md @@ -1,13 +1,11 @@ --- title: Toggle description: A two-state button that can be either on or off. -source: apps/www/src/lib/registry/default/ui/toggle +source: apps/www/src/lib/registry/default/ui/toggle primitive: https://www.radix-vue.com/components/toggle.html --- - - - + ## Installation @@ -52,34 +50,26 @@ import { Toggle } from '@/components/ui/toggle' ## Examples -### Default - - +### Default + ### Outline - - + ### With Text - ### Small - ### Large - ### Disabled - - - diff --git a/apps/www/src/content/docs/components/tooltip.md b/apps/www/src/content/docs/components/tooltip.md index 14108ed39..ab2a4d8bf 100644 --- a/apps/www/src/content/docs/components/tooltip.md +++ b/apps/www/src/content/docs/components/tooltip.md @@ -1,12 +1,11 @@ --- title: Tooltip description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. -source: apps/www/src/lib/registry/default/ui/tooltip +source: apps/www/src/lib/registry/default/ui/tooltip primitive: https://www.radix-vue.com/components/tooltip.html --- - - + ## Installation @@ -36,4 +35,4 @@ import { -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/installation.md b/apps/www/src/content/docs/installation.md index 04a306089..567b225d8 100644 --- a/apps/www/src/content/docs/installation.md +++ b/apps/www/src/content/docs/installation.md @@ -2,7 +2,7 @@ title: Installation description: How to install dependencies and structure your app. --- - + ## Frameworks
@@ -18,7 +18,7 @@ description: How to install dependencies and structure your app.

Vite

- + Nuxt @@ -53,11 +53,9 @@ description: How to install dependencies and structure your app.

Laravel

- +
- - ## TypeScript This project and the components are written in TypeScript. We recommend using TypeScript for your project as well. @@ -97,11 +95,11 @@ To configure import aliases, you can use the following `jsconfig.json`: ## VSCode extension -Install the [shadcn-vue](https://marketplace.visualstudio.com/items?itemName=Selemondev.shadcn-vue) extension by [@selemondev](https://github.com/selemondev) in Visual Studio Code to easily add Shadcn Vue components to your project. +Install the [shadcn-vue](https://marketplace.visualstudio.com/items?itemName=Selemondev.shadcn-vue) extension by [@selemondev](https://github.com/selemondev) in Visual Studio Code to easily add Shadcn Vue components to your project. This extension offers a range of features: - Ability to initialize the Shadcn Vue CLI - Install components - Open documentation -- Navigate to a specific component's documentation page directly from your IDE. +- Navigate to a specific component's documentation page directly from your IDE. - Handy snippets for quick and straightforward component imports and markup. diff --git a/apps/www/src/content/docs/installation/astro.md b/apps/www/src/content/docs/installation/astro.md index 3f5efd57b..b465dd450 100644 --- a/apps/www/src/content/docs/installation/astro.md +++ b/apps/www/src/content/docs/installation/astro.md @@ -126,7 +126,7 @@ import '@/styles/globals.css' To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own `globals.css` file. To do this, set the `applyBaseStyles` config option for the tailwind plugin in `astro.config.mjs` to `false`. -```ts:line-numbers {3-5} +```ts:line-numbers {3-5} export default defineConfig({ integrations: [ tailwind({ @@ -161,4 +161,4 @@ import { Button } from "@/components/ui/button" ``` - \ No newline at end of file + diff --git a/apps/www/src/content/docs/installation/laravel.md b/apps/www/src/content/docs/installation/laravel.md index 791a1f3d1..9f83e77d6 100644 --- a/apps/www/src/content/docs/installation/laravel.md +++ b/apps/www/src/content/docs/installation/laravel.md @@ -34,7 +34,7 @@ Where is your global CSS file? › resources/css/app.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js Configure the import alias for components: › @/Components -Configure the import alias for utils: › @/lib/utils +Configure the import alias for utils: › @/lib/utils ``` ### Update tailwind.config.js @@ -150,4 +150,4 @@ import { Button } from '@/Components/ui/button' ``` - \ No newline at end of file + diff --git a/apps/www/src/content/docs/installation/nuxt.md b/apps/www/src/content/docs/installation/nuxt.md index ff91808fc..c5dc56ac2 100644 --- a/apps/www/src/content/docs/installation/nuxt.md +++ b/apps/www/src/content/docs/installation/nuxt.md @@ -41,7 +41,6 @@ npm install -D @nuxtjs/tailwindcss - Add the following code to `modules/shadcn.ts`. @@ -148,7 +147,6 @@ declare module '@nuxt/schema' { - ### Configure `nuxt.config.ts` ```ts @@ -189,7 +187,7 @@ Where is your global CSS file? › › src/index.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js Configure the import alias for components: › @/components -Configure the import alias for utils: › @/lib/utils +Configure the import alias for utils: › @/lib/utils ``` ### App structure @@ -197,7 +195,7 @@ Configure the import alias for utils: › @/lib/utils Here's the default structure of Nuxt app. You can use this as a reference: ```txt {6-16,20-21} -. +. ├── pages │ ├── index.vue │ └── dashboard.vue diff --git a/apps/www/src/content/docs/introduction.md b/apps/www/src/content/docs/introduction.md index aa4a55c93..e5957005c 100644 --- a/apps/www/src/content/docs/introduction.md +++ b/apps/www/src/content/docs/introduction.md @@ -21,7 +21,6 @@ _Use this as a reference to build your own component libraries._ ## FAQ - @@ -58,4 +57,4 @@ Yes. Free to use for personal and commercial projects. No attribution required. But let us know if you do use it. We'd love to see what you build with it. - \ No newline at end of file + diff --git a/apps/www/src/content/docs/theming.md b/apps/www/src/content/docs/theming.md index f4fcdd587..3e229e41a 100644 --- a/apps/www/src/content/docs/theming.md +++ b/apps/www/src/content/docs/theming.md @@ -3,7 +3,6 @@ title: Theming description: Use CSS Variables to customize the look and feel of your application. --- - You can choose between using CSS variables or Tailwind CSS utility classes for theming. ## Utility classes @@ -37,7 +36,6 @@ To use utility classes for theming set `tailwind.cssVariables` to `false` in you ``` To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file. - ```json {7} title="components.json" { @@ -96,64 +94,64 @@ Here's the list of variables available for customization: --foreground: 222.2 47.4% 11.2%; ``` -```css +```css /* Muted backgrounds such as , and */ --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; ``` -```css +```css /* Background color for */ --card: 0 0% 100%; --card-foreground: 222.2 47.4% 11.2%; ``` -```css +```css /* Background color for popovers such as , , */ --popover: 0 0% 100%; --popover-foreground: 222.2 47.4% 11.2%; ``` -```css +```css /* Default border color */ --border: 214.3 31.8% 91.4%; ``` -```css +```css /* Border color for inputs such as ,