From 69b30504f4ba7c061a232000c835ccdcf3cf4512 Mon Sep 17 00:00:00 2001 From: jolbol1 Date: Sat, 21 Sep 2024 09:43:22 +0100 Subject: [PATCH] change package manager install component --- contentlayer.config.js | 64 ++++---- public/sitemap.xml | 88 +++++------ src/app/globals.css | 13 ++ src/components/copy-button.tsx | 72 --------- src/components/install-tabs.tsx | 69 +++++++++ src/components/mdx-components.tsx | 28 +--- src/content/docs/components/breadcrumbs.mdx | 26 +++- src/content/docs/components/button.mdx | 26 +++- src/content/docs/components/calendar.mdx | 26 +++- .../docs/components/checkbox-group.mdx | 26 +++- src/content/docs/components/checkbox.mdx | 26 +++- .../docs/components/color-primitives.mdx | 26 +++- src/content/docs/components/color.mdx | 26 +++- src/content/docs/components/combobox.mdx | 26 +++- src/content/docs/components/date-picker.mdx | 26 +++- .../docs/components/date-range-picker.mdx | 26 +++- src/content/docs/components/datefield.mdx | 26 +++- src/content/docs/components/dialog.mdx | 26 +++- src/content/docs/components/dropzone.mdx | 26 +++- src/content/docs/components/form.mdx | 26 +++- src/content/docs/components/grid-list.mdx | 26 +++- src/content/docs/components/group.mdx | 26 +++- src/content/docs/components/link.mdx | 26 +++- src/content/docs/components/list-box.mdx | 26 +++- src/content/docs/components/menu.mdx | 26 +++- src/content/docs/components/meter.mdx | 26 +++- src/content/docs/components/modal.mdx | 26 +++- src/content/docs/components/numberfield.mdx | 26 +++- src/content/docs/components/popover.mdx | 26 +++- src/content/docs/components/progress.mdx | 26 +++- src/content/docs/components/radio-group.mdx | 26 +++- .../docs/components/range-calendar.mdx | 26 +++- src/content/docs/components/searchfield.mdx | 26 +++- src/content/docs/components/select.mdx | 26 +++- src/content/docs/components/slider.mdx | 26 +++- src/content/docs/components/switch.mdx | 26 +++- src/content/docs/components/tabs.mdx | 26 +++- src/content/docs/components/tag-group.mdx | 26 +++- src/content/docs/components/textfield.mdx | 26 +++- src/content/docs/components/timefield.mdx | 26 +++- src/content/docs/components/toggle.mdx | 26 +++- src/content/docs/components/toolbar.mdx | 26 +++- src/content/docs/components/tooltip.mdx | 26 +++- src/content/docs/installation/cli.mdx | 60 ++++++-- src/content/docs/installation/index.mdx | 142 +++++++++++++++--- src/lib/rehype-npm-command.ts | 85 ----------- src/lib/use-theme-store.ts | 4 + src/types/unist.ts | 9 +- 48 files changed, 1186 insertions(+), 410 deletions(-) create mode 100644 src/components/install-tabs.tsx delete mode 100644 src/lib/rehype-npm-command.ts diff --git a/contentlayer.config.js b/contentlayer.config.js index 693c3370..b66886a2 100644 --- a/contentlayer.config.js +++ b/contentlayer.config.js @@ -2,16 +2,15 @@ import { defineDocumentType, defineNestedType, makeSource, -} from "contentlayer2/source-files"; -import rehypeAutolinkHeadings from "rehype-autolink-headings"; -import rehypePrettyCode from "rehype-pretty-code"; -import rehypeSlug from "rehype-slug"; -import { codeImport } from "remark-code-import"; -import remarkGfm from "remark-gfm"; -import { visit } from "unist-util-visit"; +} from "contentlayer2/source-files" +import rehypeAutolinkHeadings from "rehype-autolink-headings" +import rehypePrettyCode from "rehype-pretty-code" +import rehypeSlug from "rehype-slug" +import { codeImport } from "remark-code-import" +import remarkGfm from "remark-gfm" +import { visit } from "unist-util-visit" -import { rehypeComponent } from "./src/lib/rehype-component"; -import { rehypeNpmCommand } from "./src/lib/rehype-npm-command"; +import { rehypeComponent } from "./src/lib/rehype-component" /** @type {import('contentlayer2/source-files').ComputedFields} */ const computedFields = { @@ -23,7 +22,7 @@ const computedFields = { type: "string", resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"), }, -}; +} const LinksProperties = defineNestedType(() => ({ name: "LinksProperties", @@ -35,7 +34,7 @@ const LinksProperties = defineNestedType(() => ({ type: "string", }, }, -})); +})) export const Doc = defineDocumentType(() => ({ name: "Doc", @@ -75,7 +74,7 @@ export const Doc = defineDocumentType(() => ({ }, }, computedFields, -})); +})) export default makeSource({ contentDirPath: "./src/content", @@ -88,26 +87,26 @@ export default makeSource({ () => (tree) => { visit(tree, (node) => { if (node?.type === "element" && node?.tagName === "pre") { - const [codeEl] = node.children; + const [codeEl] = node.children if (codeEl.tagName !== "code") { - return; + return } if (codeEl.data?.meta) { // Extract event from meta and pass it down the tree. - const regex = /event="([^"]*)"/; - const match = codeEl.data?.meta.match(regex); + const regex = /event="([^"]*)"/ + const match = codeEl.data?.meta.match(regex) if (match) { - node.__event__ = match ? match[1] : null; - codeEl.data.meta = codeEl.data.meta.replace(regex, ""); + node.__event__ = match ? match[1] : null + codeEl.data.meta = codeEl.data.meta.replace(regex, "") } } - node.__rawString__ = codeEl.children?.[0].value; - node.__src__ = node.properties?.__src__; - node.__style__ = node.properties?.__style__; + node.__rawString__ = codeEl.children?.[0].value + node.__src__ = node.properties?.__src__ + node.__style__ = node.properties?.__style__ } - }); + }) }, [ rehypePrettyCode, @@ -119,33 +118,32 @@ export default makeSource({ visit(tree, (node) => { if (node?.type === "element" && node?.tagName === "figure") { if (!("data-rehype-pretty-code-figure" in node.properties)) { - return; + return } - const preElement = node.children.at(-1); + const preElement = node.children.at(-1) if (preElement.tagName !== "pre") { - return; + return } preElement.properties["__withMeta__"] = - node.children.at(0).tagName === "div"; - preElement.properties["__rawString__"] = node.__rawString__; + node.children.at(0).tagName === "div" + preElement.properties["__rawString__"] = node.__rawString__ if (node.__src__) { - preElement.properties["__src__"] = node.__src__; + preElement.properties["__src__"] = node.__src__ } if (node.__event__) { - preElement.properties["__event__"] = node.__event__; + preElement.properties["__event__"] = node.__event__ } if (node.__style__) { - preElement.properties["__style__"] = node.__style__; + preElement.properties["__style__"] = node.__style__ } } - }); + }) }, - rehypeNpmCommand, [ rehypeAutolinkHeadings, { @@ -157,4 +155,4 @@ export default makeSource({ ], ], }, -}); +}) diff --git a/public/sitemap.xml b/public/sitemap.xml index 1a21fcc9..d235350d 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -1,47 +1,47 @@ -https://jollyui.dev/helloworld2024-08-31T22:46:20.557Zdaily0.7 -https://jollyui.dev2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/changelog2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/breadcrumbs2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/button2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/calendar2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/checkbox-group2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/checkbox2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/color-primitives2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/color2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/combobox2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/date-picker2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/date-range-picker2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/datefield2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/dialog2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/dropzone2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/file-trigger2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/form2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/grid-list2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/group2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/link2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/list-box2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/menu2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/meter2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/modal2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/numberfield2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/popover2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/progress2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/radio-group2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/range-calendar2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/searchfield2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/select2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/slider2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/switch2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/tabs2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/tag-group2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/textfield2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/timefield2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/toggle2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/toolbar2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/components/tooltip2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/installation/cli2024-08-31T22:46:20.558Zdaily0.7 -https://jollyui.dev/docs/installation2024-08-31T22:46:20.558Zdaily0.7 +https://jollyui.dev/helloworld2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/changelog2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/breadcrumbs2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/button2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/calendar2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/checkbox-group2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/checkbox2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/color-primitives2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/color2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/combobox2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/date-picker2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/date-range-picker2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/datefield2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/dialog2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/dropzone2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/file-trigger2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/form2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/grid-list2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/group2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/link2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/list-box2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/menu2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/meter2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/modal2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/numberfield2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/popover2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/progress2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/radio-group2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/range-calendar2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/searchfield2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/select2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/slider2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/switch2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/tabs2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/tag-group2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/textfield2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/timefield2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/toggle2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/toolbar2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/components/tooltip2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/installation/cli2024-09-21T08:41:09.571Zdaily0.7 +https://jollyui.dev/docs/installation2024-09-21T08:41:09.571Zdaily0.7 \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index 8a30f67b..88de7733 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -268,3 +268,16 @@ margin-bottom: -2px; } } + +.install-selected[data-selected="true"]:after { + position: absolute; + right: 8px; + bottom: -1.5px; + left: 8px; + z-index: 1; + height: 2px; + border-radius: 2px; + content: ""; + background-color: hsl(var(--primary)); + transition: background-color 0.25s; +} diff --git a/src/components/copy-button.tsx b/src/components/copy-button.tsx index f1f8efc6..b024ce36 100644 --- a/src/components/copy-button.tsx +++ b/src/components/copy-button.tsx @@ -3,7 +3,6 @@ import * as React from "react" import { CheckIcon, CopyIcon } from "@radix-ui/react-icons" -import { NpmCommands } from "@/types/unist" import { Event, trackEvent } from "@/lib/events" import { cn } from "@/lib/utils" import { Button, ButtonProps } from "@/registry/new-york/ui/button" @@ -134,74 +133,3 @@ export function CopyWithClassNames({ ) } - -interface CopyNpmCommandButtonProps { - commands: Required - className?: string -} - -export function CopyNpmCommandButton({ - commands, - className, -}: CopyNpmCommandButtonProps) { - const [hasCopied, setHasCopied] = React.useState(false) - - React.useEffect(() => { - setTimeout(() => { - setHasCopied(false) - }, 2000) - }, [hasCopied]) - - const commandMap: { [key: string]: string } = { - pnpm: commands.__pnpmCommand__, - npm: commands.__npmCommand__, - yarn: commands.__yarnCommand__, - bun: commands.__bunCommand__, - } - - const copyCommand = React.useCallback( - (value: string, pm: "npm" | "pnpm" | "yarn" | "bun") => { - copyToClipboardWithMeta(value, { - name: "copy_npm_command", - properties: { - command: value, - pm, - }, - }) - setHasCopied(true) - }, - [] - ) - - return ( - - - - { - copyCommand(commandMap[key as string]!, key as any) - }} - > - npm - yarn - pnpm - bun - - - - ) -} diff --git a/src/components/install-tabs.tsx b/src/components/install-tabs.tsx new file mode 100644 index 00000000..f2a3c523 --- /dev/null +++ b/src/components/install-tabs.tsx @@ -0,0 +1,69 @@ +import { ReactNode } from "react" +import { TabsProps, composeRenderProps } from "react-aria-components" + +import { useThemeStore } from "@/lib/use-theme-store" +import { cn } from "@/lib/utils" +import { Tab, TabList, TabPanel, Tabs } from "@/registry/default/ui/tabs" + +interface PackageManagerTabs extends Omit { + children: ReactNode +} + +export function PackageManagerTabs({ children, ...props }: PackageManagerTabs) { + const pm = useThemeStore((state) => state.packageManager) + const updatePm = useThemeStore((state) => state.setPackageManager) + return ( + updatePm(key as any)} + className={cn("mt-2 gap-0", props.className)} + {...props} + > + + + NPM + + + PNPM + + + Bun + + + Yarn + + + {children} + + ) +} + +export const PackageManagerContent = ({ + className, + value, + ...props +}: React.ComponentProps & { + value: "npm" | "pnpm" | "bun" | "yarn" +}) => ( + figure>pre]:m-0 [&>figure>pre]:rounded-t-none [&>figure>pre]:border-t-0", + className + )} + {...props} + /> +) diff --git a/src/components/mdx-components.tsx b/src/components/mdx-components.tsx index 7e31c9bc..46a505e0 100644 --- a/src/components/mdx-components.tsx +++ b/src/components/mdx-components.tsx @@ -6,7 +6,6 @@ import Link from "next/link" import { YouTubeEmbed } from "@next/third-parties/google" import { useMDXComponent } from "next-contentlayer2/hooks" -import { NpmCommands } from "@/types/unist" import { Event } from "@/lib/events" import { useThemeStore } from "@/lib/use-theme-store" import { cn } from "@/lib/utils" @@ -15,13 +14,14 @@ import { CodeBlockWrapper } from "@/components/code-block-wrapper" import { ComponentExample } from "@/components/component-example" import { ComponentPreview } from "@/components/component-preview" import { ComponentSource } from "@/components/component-source" -import { CopyButton, CopyNpmCommandButton } from "@/components/copy-button" +import { CopyButton } from "@/components/copy-button" import { FrameworkDocs } from "@/components/framework-docs" import { StyleWrapper } from "@/components/style-wrapper" import { Tab, TabList, TabPanel, Tabs } from "@/registry/default/ui/tabs" import { Style } from "@/registry/styles" import { ComponentCard, ComponentCards } from "./component-cards" +import { PackageManagerContent, PackageManagerTabs } from "./install-tabs" const components = { YouTubeEmbed, @@ -149,10 +149,6 @@ const components = { pre: ({ className, __rawString__, - __npmCommand__, - __yarnCommand__, - __pnpmCommand__, - __bunCommand__, __withMeta__, __src__, __event__, @@ -164,7 +160,7 @@ const components = { __withMeta__?: boolean __src__?: string __event__?: Event["name"] - } & NpmCommands) => { + }) => { return ( 
-        {__rawString__ && !__npmCommand__ && (
+        {__rawString__ && (
           
         )}
-        {__npmCommand__ &&
-          __yarnCommand__ &&
-          __pnpmCommand__ &&
-          __bunCommand__ && (
-            
-          )}
       
     )
   },
@@ -215,6 +197,8 @@ const components = {
   ComponentSource,
   ComponentCard,
   ComponentCards,
+  PackageManagerTabs,
+  PackageManagerContent,
   CodeBlockWrapper: ({ ...props }) => (
     
   ),
diff --git a/src/content/docs/components/breadcrumbs.mdx b/src/content/docs/components/breadcrumbs.mdx
index 25980f6d..3a22a165 100644
--- a/src/content/docs/components/breadcrumbs.mdx
+++ b/src/content/docs/components/breadcrumbs.mdx
@@ -20,9 +20,29 @@ Breadcrumbs provide a list of links to parent pages of the current page in hiera
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/breadcrumbs
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/breadcrumbs
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/breadcrumbs
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/breadcrumbs
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/breadcrumbs
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/button.mdx b/src/content/docs/components/button.mdx
index 4a392c4e..e396c28c 100644
--- a/src/content/docs/components/button.mdx
+++ b/src/content/docs/components/button.mdx
@@ -22,9 +22,29 @@ On the surface, building a custom styled button seems simple. However, there are
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/button
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/button
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/button
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/button
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/button 
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/calendar.mdx b/src/content/docs/components/calendar.mdx
index efe0cd68..629d374e 100644
--- a/src/content/docs/components/calendar.mdx
+++ b/src/content/docs/components/calendar.mdx
@@ -22,9 +22,29 @@ There is no standalone calendar element in HTML. ``is close,
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/calendar
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/calendar
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/calendar
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/calendar
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/calendar
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/checkbox-group.mdx b/src/content/docs/components/checkbox-group.mdx
index 5548ec4c..0e84ff5d 100644
--- a/src/content/docs/components/checkbox-group.mdx
+++ b/src/content/docs/components/checkbox-group.mdx
@@ -22,9 +22,29 @@ Checkbox groups can be built in HTML with the `
` and `` element
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/checkbox
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/checkbox
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/checkbox
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/checkbox
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/checkbox
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/checkbox.mdx b/src/content/docs/components/checkbox.mdx
index 4c62fb21..d000c0f0 100644
--- a/src/content/docs/components/checkbox.mdx
+++ b/src/content/docs/components/checkbox.mdx
@@ -22,9 +22,29 @@ Checkboxes can be built with the `` HTML element, but this can be difficu
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/checkbox
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/checkbox
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/checkbox
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/checkbox
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/checkbox
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/color-primitives.mdx b/src/content/docs/components/color-primitives.mdx
index 2f93fa28..f264e529 100644
--- a/src/content/docs/components/color-primitives.mdx
+++ b/src/content/docs/components/color-primitives.mdx
@@ -18,9 +18,29 @@ links:
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/color
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/color
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/color
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/color
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/color
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/color.mdx b/src/content/docs/components/color.mdx
index a8d1525b..5a577213 100644
--- a/src/content/docs/components/color.mdx
+++ b/src/content/docs/components/color.mdx
@@ -20,9 +20,29 @@ The following are examples of how you can combine the [Primitives](./color-primi
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/color
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/color
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/color
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/color
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/color
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/combobox.mdx b/src/content/docs/components/combobox.mdx
index 62bae501..34bde815 100644
--- a/src/content/docs/components/combobox.mdx
+++ b/src/content/docs/components/combobox.mdx
@@ -22,9 +22,29 @@ A combo box can be built using the `` HTML element, but this is very l
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/combobox
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/combobox
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/combobox
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/combobox
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/combobox
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/date-picker.mdx b/src/content/docs/components/date-picker.mdx
index 9b73700e..41f3e088 100644
--- a/src/content/docs/components/date-picker.mdx
+++ b/src/content/docs/components/date-picker.mdx
@@ -22,9 +22,29 @@ A date picker can be built using ``, but this is very limited
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/date-picker
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/date-picker
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/date-picker
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/date-picker
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/date-picker
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/date-range-picker.mdx b/src/content/docs/components/date-range-picker.mdx
index 3f6c4d7a..b9462c94 100644
--- a/src/content/docs/components/date-range-picker.mdx
+++ b/src/content/docs/components/date-range-picker.mdx
@@ -22,9 +22,29 @@ A date range picker can be built using two separate `` elemen
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/date-picker
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/date-picker
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/date-picker
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/date-picker
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/date-picker
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/datefield.mdx b/src/content/docs/components/datefield.mdx
index 4db59f03..2085d13f 100644
--- a/src/content/docs/components/datefield.mdx
+++ b/src/content/docs/components/datefield.mdx
@@ -22,9 +22,29 @@ A date field can be built using ``, but this is very limited
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/datefield
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/datefield
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/datefield
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/datefield
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/datefield
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/dialog.mdx b/src/content/docs/components/dialog.mdx
index 9c3e638c..3ce2ea0c 100644
--- a/src/content/docs/components/dialog.mdx
+++ b/src/content/docs/components/dialog.mdx
@@ -22,9 +22,29 @@ The HTML `` element can be used to build dialogs. However, it is not yet
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/dialog
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/dialog
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/dialog
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/dialog
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/dialog
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/dropzone.mdx b/src/content/docs/components/dropzone.mdx
index 8ff13427..082dc787 100644
--- a/src/content/docs/components/dropzone.mdx
+++ b/src/content/docs/components/dropzone.mdx
@@ -22,9 +22,29 @@ There is no native element to implement a drop zone in HTML. DropZone helps achi
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/dropzone
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/dropzone
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/dropzone
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/dropzone
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/dropzone
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/form.mdx b/src/content/docs/components/form.mdx
index 8be2d92e..26b98b89 100644
--- a/src/content/docs/components/form.mdx
+++ b/src/content/docs/components/form.mdx
@@ -22,9 +22,29 @@ The HTML `
` element can be used to build forms. React Aria's Form componen
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/field
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/field
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/field
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/field
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/field
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/grid-list.mdx b/src/content/docs/components/grid-list.mdx
index e3d50180..0d5fc17d 100644
--- a/src/content/docs/components/grid-list.mdx
+++ b/src/content/docs/components/grid-list.mdx
@@ -24,9 +24,29 @@ Note: Use `GridList` when your list items may contain interactive elements such
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/grid-list
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/grid-list
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/grid-list
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/grid-list
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/grid-list
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/group.mdx b/src/content/docs/components/group.mdx
index b8bd9323..69074373 100644
--- a/src/content/docs/components/group.mdx
+++ b/src/content/docs/components/group.mdx
@@ -22,9 +22,29 @@ A group can be created with a `
` or via the HTML `
`
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/field
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/field
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/field
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/field
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/field
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/link.mdx b/src/content/docs/components/link.mdx
index 29351c10..68ba5e96 100644
--- a/src/content/docs/components/link.mdx
+++ b/src/content/docs/components/link.mdx
@@ -22,9 +22,29 @@ Links can be created in HTML with the `` element with an href attribute. Howe
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/link
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/link
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/link
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/link
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/link
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/list-box.mdx b/src/content/docs/components/list-box.mdx
index 9d6fe104..885ea53e 100644
--- a/src/content/docs/components/list-box.mdx
+++ b/src/content/docs/components/list-box.mdx
@@ -24,9 +24,29 @@ Note: ListBox only handles the list itself. For a dropdown, see [Select](../../d
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/list-box
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/list-box
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/list-box
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/list-box
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/list-box
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/menu.mdx b/src/content/docs/components/menu.mdx
index eda367e1..91fa937d 100644
--- a/src/content/docs/components/menu.mdx
+++ b/src/content/docs/components/menu.mdx
@@ -22,9 +22,29 @@ There is no native element to implement a menu in HTML that is widely supported.
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/menu
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/menu
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/menu
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/menu
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/menu
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/meter.mdx b/src/content/docs/components/meter.mdx
index 0b5eae5b..68d6b99d 100644
--- a/src/content/docs/components/meter.mdx
+++ b/src/content/docs/components/meter.mdx
@@ -22,9 +22,29 @@ The `` HTML element can be used to build a meter, however it is very diff
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/meter
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/meter
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/meter
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/meter
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/meter
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/modal.mdx b/src/content/docs/components/modal.mdx
index e6f438fc..288c864b 100644
--- a/src/content/docs/components/modal.mdx
+++ b/src/content/docs/components/modal.mdx
@@ -23,9 +23,29 @@ The HTML `` element can be used to build modals. However, it is not yet
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/dialog
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/dialog
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/dialog
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/dialog
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/dialog
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/numberfield.mdx b/src/content/docs/components/numberfield.mdx
index 2c9a396b..02223427 100644
--- a/src/content/docs/components/numberfield.mdx
+++ b/src/content/docs/components/numberfield.mdx
@@ -22,9 +22,29 @@ Number fields can be built with ``, but the behavior is ver
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/numberfield
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/numberfield
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/numberfield
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/numberfield
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/numberfield
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/popover.mdx b/src/content/docs/components/popover.mdx
index 1bf650dc..57d28a40 100644
--- a/src/content/docs/components/popover.mdx
+++ b/src/content/docs/components/popover.mdx
@@ -23,9 +23,29 @@ There is no built in way to create popovers in HTML. Popover helps achieve acces
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/popover
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/popover
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/popover
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/popover
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/popover
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/progress.mdx b/src/content/docs/components/progress.mdx
index 7ce3f186..30cbe4d9 100644
--- a/src/content/docs/components/progress.mdx
+++ b/src/content/docs/components/progress.mdx
@@ -22,9 +22,29 @@ The `` HTML element can be used to build a progress bar, however it is
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/progress
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/progress
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/progress
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/progress
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/progress
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/radio-group.mdx b/src/content/docs/components/radio-group.mdx
index a5558231..6d659887 100644
--- a/src/content/docs/components/radio-group.mdx
+++ b/src/content/docs/components/radio-group.mdx
@@ -22,9 +22,29 @@ Radio groups can be built in HTML with the `
` and `` elements,
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/radio-group
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/radio-group
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/radio-group
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/radio-group
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/radio-group
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/range-calendar.mdx b/src/content/docs/components/range-calendar.mdx
index 1ccafb9a..a01091b1 100644
--- a/src/content/docs/components/range-calendar.mdx
+++ b/src/content/docs/components/range-calendar.mdx
@@ -22,9 +22,29 @@ There is no standalone range calendar element in HTML. Two separate `
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/calendar
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/calendar
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/calendar
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/calendar
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/calendar
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/searchfield.mdx b/src/content/docs/components/searchfield.mdx
index 78add9a5..f142f850 100644
--- a/src/content/docs/components/searchfield.mdx
+++ b/src/content/docs/components/searchfield.mdx
@@ -23,9 +23,29 @@ Search fields can be built with ``, but these can be hard t
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/searchfield
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/searchfield
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/searchfield
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/searchfield
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/searchfield
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/select.mdx b/src/content/docs/components/select.mdx
index aef4bc4e..21d787a7 100644
--- a/src/content/docs/components/select.mdx
+++ b/src/content/docs/components/select.mdx
@@ -22,9 +22,29 @@ A select can be built using the `` HTML element can be used to build a slider, however i
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/slider
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/slider
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/slider
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/slider
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/slider
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/switch.mdx b/src/content/docs/components/switch.mdx
index dafdb3d6..cabb5d7a 100644
--- a/src/content/docs/components/switch.mdx
+++ b/src/content/docs/components/switch.mdx
@@ -21,9 +21,29 @@ There is no native HTML element with switch styling. `` i
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/switch
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/switch
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/switch
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/switch
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/switch
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/tabs.mdx b/src/content/docs/components/tabs.mdx
index 2996f935..52e621b6 100644
--- a/src/content/docs/components/tabs.mdx
+++ b/src/content/docs/components/tabs.mdx
@@ -20,9 +20,29 @@ links:
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/tabs
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/tabs
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/tabs
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/tabs
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/tabs
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/tag-group.mdx b/src/content/docs/components/tag-group.mdx
index c9c4aa00..e5c6a94d 100644
--- a/src/content/docs/components/tag-group.mdx
+++ b/src/content/docs/components/tag-group.mdx
@@ -22,9 +22,29 @@ A static tag list can be built using `
    ` or `
      ` HTML elements, but does no
 
 
 
-```bash
-npx shadcn@latest add https://jollyui.dev/[[STYLE]]/tag-group
-```
+
+  
+    ```bash
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/tag-group
+    ```
+  
+  
+    ```bash
+    pnpm dlx shadcn@latest add https://jollyui.dev/[[STYLE]]/tag-group
+    ```
+
+  
+  
+    ```bash
+    bunx --bun shadcn@latest add https://jollyui.dev/[[STYLE]]/tag-group
+    ```
+  
+  
+    ```bash 
+    npx shadcn@latest add https://jollyui.dev/[[STYLE]]/tag-group
+    ```
+  
+
 
 
 
diff --git a/src/content/docs/components/textfield.mdx b/src/content/docs/components/textfield.mdx
index 6650657b..b4665142 100644
--- a/src/content/docs/components/textfield.mdx
+++ b/src/content/docs/components/textfield.mdx
@@ -22,9 +22,29 @@ Text fields can be built with `` or `