love-ui 1.2.8 → 1.2.10

package/dist/mcp-server.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import{Server as ge}from"@modelcontextprotocol/sdk/server";var L={name:"love-ui",version:"1.3.0",private:!1,license:"AGPL-3.0-or-later",type:"module",bin:{loveui:"dist/index.js","love-ui":"dist/index.js","loveui-mcp":"dist/mcp-server.js"},files:["dist","packages","*.ts","*.tsx","*.css","*.mdx"],main:"packages/love-ui/index.ts",types:"packages/love-ui/index.ts",exports:{".":{import:"./packages/love-ui/index.ts",require:"./packages/love-ui/index.ts"},"./lib/*":"./packages/love-ui/*","./components/*":"./packages/love-ui/components/*","./shadcn-ui/*":"./packages/shadcn-ui/*","./package.json":"./package.json"},dependencies:{"@modelcontextprotocol/sdk":"^1.18.1",postcss:"^8.5.6","postcss-nested":"^7.0.2"},scripts:{build:"tsup",postbuild:"node ./scripts/copy-packages.mjs",clean:"rimraf dist packages"},devDependencies:{"@types/node":"^20.14.10",rimraf:"^6.0.1",tsup:"^8.5.0"}};import{constants as X}from"fs";import{access as H,readFile as N,readdir as C}from"fs/promises";import D,{extname as W,join as P,relative as V}from"path";import{fileURLToPath as Y}from"url";import A from"postcss";import Q from"postcss-nested";var Z=D.dirname(Y(import.meta.url)),ee=D.resolve(Z,".."),U=D.join(ee,"packages"),te=new Set([".turbo",".next",".git","dist","build","storybook-static","node_modules","__tests__","__mocks__","coverage"]),se=new Set([".ts",".tsx",".js",".jsx",".mjs",".cjs",".json",".css",".scss",".sass",".mdx"]),ne=new Set(["package.json","tsconfig.json","tsconfig.build.json","tsconfig.test.json","README.md",".DS_Store"]),ie=new Set(["shadcn-ui","typescript-config","patterns","loveui","love-ui"]),re=e=>e.replace(/\\/g,"/"),J=async(e,s,t)=>{let n=await C(e,{withFileTypes:!0});for(let i of n){let o=P(e,i.name);if(i.isDirectory()){if(te.has(i.name))continue;await J(o,s,t);continue}let d=W(i.name);!se.has(d)||ne.has(i.name)||i.name.endsWith(".d.ts")||i.name.endsWith(".test.ts")||i.name.endsWith(".test.tsx")||i.name.endsWith(".stories.tsx")||t.push({absolute:o,relative:re(V(s,o))})}},oe=(e,s)=>{let t=e.loveui??{},n=typeof t.target=="string"?t.target.trim():"",i=t.category;if(n.length>0){let o=typeof t.includePackageName=="boolean"?t.includePackageName:!1;return{base:n.replace(/\/+$/,""),includePackageName:o}}return i==="feature"?{base:"components",includePackageName:!0}:i==="block"?{base:"components/blocks",includePackageName:!0}:{base:"components/ui",includePackageName:!0}},ae=e=>{let t=(e.loveui??{}).type;return typeof t=="string"&&t.trim().length>0?t:"registry:ui"},ce=async e=>{try{return await H(e,X.F_OK),!0}catch{return!1}},le=e=>e.startsWith("@loveui/")||e.startsWith("@repo/"),pe=e=>e.replace(/^@repo\//,"").replace(/^@loveui\//,""),G=async()=>(await C(U,{withFileTypes:!0})).filter(s=>s.isDirectory()).map(s=>s.name).filter(s=>!ie.has(s)).sort((s,t)=>s.localeCompare(t)),E=async e=>{let s=P(U,e),t=P(s,"package.json");if(!await ce(t))throw new Error(`Missing package.json for ${e}`);let n=JSON.parse(await N(t,"utf8")),i=ae(n),o=Object.keys(n.dependencies??{}),d=Object.keys(n.peerDependencies??{}),O=Object.keys(n.devDependencies??{}),k=new Set([...o,...d,...O].filter(le).filter(r=>r!=="@loveui/shadcn-ui")),T=[...new Set([...o,...d].filter(r=>!k.has(r)))],_=[...new Set(O.filter(r=>!k.has(r)&&!["@loveui/typescript-config","@types/react","@types/react-dom","typescript"].includes(r)))],w=[];for(let r of k){let m=pe(r);w.push(`https://www.loveui.dev/r/${m}.json`)}let I=[];await J(s,s,I);let u=[],c={},p=oe(n,e);for(let r of I){let m=await N(r.absolute,"utf8"),R=W(r.absolute);if(R===".css"||R===".scss"||R===".sass"){let y=await A([Q]).process(m,{from:void 0});A.parse(y.css).walkAtRules("layer",b=>{let j=`@layer ${b.params}`;c[j]??={},b.walkRules(a=>{if(a.parent&&a.parent.type==="atrule"&&a.parent.name==="media")return;let h=a.selector,l={};a.walkDecls(v=>{l[v.prop]=v.value}),Object.keys(l).length>0&&(c[j][h]=l)}),b.walkAtRules("media",a=>{let h=`@media ${a.params}`,l=c[j];l[h]??={};let v=l[h];a.walkRules($=>{let B=$.selector,x={};$.walkDecls(F=>{x[F.prop]=F.value}),Object.keys(x).length>0&&(v[B]=x)})})});continue}let g=r.relative.startsWith("src/")?r.relative.slice(4):r.relative;if(!p.includePackageName){let y=p.base.split("/").filter(Boolean),f=y[y.length-1];f&&g.startsWith(`${f}/`)&&(g=g.slice(f.length+1))}let q=e.includes("/")?e.split("/").pop()??e:e,z=(p.includePackageName?`${p.base}/${q}`:p.base).replace(/\/+$/,"");u.push({type:i,path:g,target:`${z}/${g}`.replace(/\/+/g,"/"),content:m})}let K=!u.length&&Object.keys(c).length>0?"registry:style":i;return{$schema:"https://ui.shadcn.com/schema/registry-item.json",name:e,type:K,title:n.title??e,description:n.description,author:n.author??"Connor Love <hello@loveconnor.com>",dependencies:T.length?T:void 0,devDependencies:_.length?_:void 0,registryDependencies:w.length?Array.from(new Set(w)):void 0,files:u.length?u:void 0,css:Object.keys(c).length?c:void 0}};var S="loveui://registry/",de=e=>`${S}${e}`;async function ue(){let e=new ge({name:"loveui-mcp",version:L.version??"0.0.0"});e.addResourceProvider({name:"loveui-registry",listResources:async()=>(await G()).map(t=>({uri:de(t),name:t,description:`loveui registry definition for ${t}`,mimeType:"application/json"})),readResource:async s=>{if(!s.startsWith(S))throw new Error(`Unsupported resource URI: ${s}`);let t=s.slice(S.length),n=await E(t);return{contents:[{uri:s,mimeType:"application/json",text:JSON.stringify(n,null,2)}]}}}),e.addTool({name:"get-loveui-package",description:"Fetch a loveui registry definition by package name.",inputSchema:{type:"object",additionalProperties:!1,properties:{name:{type:"string",description:"Package name, e.g. badge"}},required:["name"]},handler:async s=>{let t=s?.name;if(typeof t!="string"||t.trim()==="")throw new Error("Package name is required.");let n=await E(t);return{content:[{type:"text",text:JSON.stringify(n,null,2)}]}}}),await e.start()}ue().catch(e=>{console.error(e),process.exit(1)});
+import{constants as ke}from"fs";import{access as Se,readFile as V}from"fs/promises";import c from"path";import{fileURLToPath as Pe}from"url";import{Server as be}from"@modelcontextprotocol/sdk/server/index.js";import{StdioServerTransport as je}from"@modelcontextprotocol/sdk/server/stdio.js";import{CallToolRequestSchema as Ee,ErrorCode as g,ListResourceTemplatesRequestSchema as Te,ListResourcesRequestSchema as xe,ListToolsRequestSchema as Ie,McpError as d,ReadResourceRequestSchema as _e}from"@modelcontextprotocol/sdk/types.js";var N={name:"love-ui",version:"1.2.10",private:!1,license:"AGPL-3.0-or-later",type:"module",bin:{loveui:"dist/index.js","love-ui":"dist/index.js","loveui-mcp":"dist/mcp-server.js"},files:["dist","packages","*.ts","*.tsx","*.css","*.mdx"],main:"packages/love-ui/index.ts",types:"packages/love-ui/index.ts",exports:{".":{import:"./packages/love-ui/index.ts",require:"./packages/love-ui/index.ts"},"./lib/*":"./packages/love-ui/*","./components/*":"./packages/love-ui/components/*","./shadcn-ui/*":"./packages/shadcn-ui/*","./package.json":"./package.json"},dependencies:{"@modelcontextprotocol/sdk":"^1.18.1",postcss:"^8.5.6","postcss-nested":"^7.0.2"},scripts:{build:"tsup",postbuild:"node ./scripts/copy-packages.mjs",clean:"rimraf dist packages"},devDependencies:{"@types/node":"^20.14.10",rimraf:"^6.0.1",tsup:"^8.5.0"}};import{constants as re}from"fs";import{access as ie,readFile as U,readdir as W}from"fs/promises";import I,{extname as G,join as x,relative as oe}from"path";import{fileURLToPath as ae}from"url";import q from"postcss";import ce from"postcss-nested";var le=I.dirname(ae(import.meta.url)),pe=I.resolve(le,".."),J=I.join(pe,"packages"),me=new Set([".turbo",".next",".git","dist","build","storybook-static","node_modules","__tests__","__mocks__","coverage"]),ue=new Set([".ts",".tsx",".js",".jsx",".mjs",".cjs",".json",".css",".scss",".sass",".mdx"]),ge=new Set(["package.json","tsconfig.json","tsconfig.build.json","tsconfig.test.json","README.md",".DS_Store"]),de=new Set(["shadcn-ui","typescript-config","patterns","loveui","love-ui"]),ye=e=>e.replace(/\\/g,"/"),H=async(e,t,s)=>{let n=await W(e,{withFileTypes:!0});for(let r of n){let o=x(e,r.name);if(r.isDirectory()){if(me.has(r.name))continue;await H(o,t,s);continue}let y=G(r.name);!ue.has(y)||ge.has(r.name)||r.name.endsWith(".d.ts")||r.name.endsWith(".test.ts")||r.name.endsWith(".test.tsx")||r.name.endsWith(".stories.tsx")||s.push({absolute:o,relative:ye(oe(t,o))})}},fe=(e,t)=>{let s=e.loveui??{},n=typeof s.target=="string"?s.target.trim():"",r=s.category;if(n.length>0){let o=typeof s.includePackageName=="boolean"?s.includePackageName:!1;return{base:n.replace(/\/+$/,""),includePackageName:o}}return r==="feature"?{base:"components",includePackageName:!0}:r==="block"?{base:"components/blocks",includePackageName:!0}:{base:"components/ui",includePackageName:!0}},he=e=>{let s=(e.loveui??{}).type;return typeof s=="string"&&s.trim().length>0?s:"registry:ui"},ve=async e=>{try{return await ie(e,re.F_OK),!0}catch{return!1}},Re=e=>e.startsWith("@loveui/")||e.startsWith("@repo/"),we=e=>e.replace(/^@repo\//,"").replace(/^@loveui\//,""),K=async()=>(await W(J,{withFileTypes:!0})).filter(t=>t.isDirectory()).map(t=>t.name).filter(t=>!de.has(t)).sort((t,s)=>t.localeCompare(s)),M=async e=>{let t=x(J,e),s=x(t,"package.json");if(!await ve(s))throw new Error(`Missing package.json for ${e}`);let n=JSON.parse(await U(s,"utf8")),r=he(n),o=Object.keys(n.dependencies??{}),y=Object.keys(n.peerDependencies??{}),D=Object.keys(n.devDependencies??{}),S=new Set([...o,...y,...D].filter(Re).filter(i=>i!=="@loveui/shadcn-ui")),A=[...new Set([...o,...y].filter(i=>!S.has(i)))],C=[...new Set(D.filter(i=>!S.has(i)&&!["@loveui/typescript-config","@types/react","@types/react-dom","typescript"].includes(i)))],P=[];for(let i of S){let h=we(i);P.push(`https://www.loveui.dev/r/${h}.json`)}let $=[];await H(t,t,$);let f=[],l={},m=fe(n,e);for(let i of $){let h=await U(i.absolute,"utf8"),b=G(i.absolute);if(b===".css"||b===".scss"||b===".sass"){let v=await q([ce]).process(h,{from:void 0});q.parse(v.css).walkAtRules("layer",j=>{let E=`@layer ${j.params}`;l[E]??={},j.walkRules(a=>{if(a.parent&&a.parent.type==="atrule"&&a.parent.name==="media")return;let w=a.selector,p={};a.walkDecls(k=>{p[k.prop]=k.value}),Object.keys(p).length>0&&(l[E][w]=p)}),j.walkAtRules("media",a=>{let w=`@media ${a.params}`,p=l[E];p[w]??={};let k=p[w];a.walkRules(L=>{let se=L.selector,T={};L.walkDecls(F=>{T[F.prop]=F.value}),Object.keys(T).length>0&&(k[se]=T)})})});continue}let u=i.relative.startsWith("src/")?i.relative.slice(4):i.relative;if(!m.includePackageName){let v=m.base.split("/").filter(Boolean),R=v[v.length-1];R&&u.startsWith(`${R}/`)&&(u=u.slice(R.length+1))}let ee=e.includes("/")?e.split("/").pop()??e:e,te=(m.includePackageName?`${m.base}/${ee}`:m.base).replace(/\/+$/,"");f.push({type:r,path:u,target:`${te}/${u}`.replace(/\/+/g,"/"),content:h})}let Z=!f.length&&Object.keys(l).length>0?"registry:style":r;return{$schema:"https://ui.shadcn.com/schema/registry-item.json",name:e,type:Z,title:n.title??e,description:n.description,author:n.author??"Connor Love <hello@loveconnor.com>",dependencies:A.length?A:void 0,devDependencies:C.length?C:void 0,registryDependencies:P.length?Array.from(new Set(P)):void 0,files:f.length?f:void 0,css:Object.keys(l).length?l:void 0}};var O="loveui://registry/",Oe="loveui://registry/{package}",B="get-loveui-package",De=e=>`${O}${e}`,Ae=c.dirname(Pe(import.meta.url)),z=c.resolve(Ae,".."),Ce=[c.join(z,"public","r"),c.resolve(z,"..","..","apps","ui","public","r"),c.resolve(process.cwd(),"apps","ui","public","r")],Y=async e=>{try{return await Se(e,ke.R_OK),!0}catch{return!1}},_=null,Q=async()=>(_||(_=(async()=>{for(let e of Ce){let t=c.join(e,"registry.json");if(await Y(t))try{let s=JSON.parse(await V(t,"utf8")),n=Array.from(new Set((s.items??[]).map(r=>r.name?.trim()).filter(r=>!!r))).sort((r,o)=>r.localeCompare(o));if(n.length===0)continue;return{dir:e,names:n,nameSet:new Set(n)}}catch{continue}}return null})()),_),$e=async()=>{let[e,t]=await Promise.all([Q(),K()]),s=new Set(t);for(let n of e?.names??[])s.add(n);return Array.from(s).sort((n,r)=>n.localeCompare(r))},Le=async e=>{let t=await Q();if(!t||!t.nameSet.has(e))return null;let s=c.join(t.dir,`${e}.json`);return await Y(s)?JSON.parse(await V(s,"utf8")):null},Fe=e=>{if(!e.startsWith(O))throw new d(g.InvalidParams,`Unsupported resource URI: ${e}`);let t=decodeURIComponent(e.slice(O.length)).trim();if(!t)throw new d(g.InvalidParams,"Package name is required.");return t},X=async e=>{try{let t=await Le(e);return t||await M(e)}catch(t){throw new d(g.InvalidParams,t instanceof Error?t.message:String(t))}};async function Ne(){let e=new be({name:"loveui-mcp",version:N.version??"0.0.0"},{capabilities:{resources:{listChanged:!0},tools:{listChanged:!0}}});e.setRequestHandler(xe,async()=>({resources:(await $e()).map(n=>({uri:De(n),name:n,description:`loveui registry definition for ${n}`,mimeType:"application/json"}))})),e.setRequestHandler(Te,async()=>({resourceTemplates:[{name:"loveui-registry",uriTemplate:Oe,description:"loveui registry definitions by package name",mimeType:"application/json"}]})),e.setRequestHandler(_e,async s=>{let n=Fe(s.params.uri),r=await X(n);return{contents:[{uri:s.params.uri,mimeType:"application/json",text:JSON.stringify(r,null,2)}]}}),e.setRequestHandler(Ie,async()=>({tools:[{name:B,description:"Fetch a loveui registry definition by package name.",inputSchema:{type:"object",additionalProperties:!1,properties:{name:{type:"string",description:"Package name, e.g. badge"}},required:["name"]}}]})),e.setRequestHandler(Ee,async s=>{if(s.params.name!==B)throw new d(g.InvalidParams,`Tool ${s.params.name} not found`);let n=s.params.arguments?.name;if(typeof n!="string"||n.trim()==="")throw new d(g.InvalidParams,"Package name is required.");let r=await X(n.trim());return{content:[{type:"text",text:JSON.stringify(r,null,2)}]}});let t=new je;await e.connect(t)}Ne().catch(e=>{console.error(e),process.exit(1)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "love-ui",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "private": false,
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/packages/code-block/README.md

@@ -0,0 +1,62 @@
+# @loveui/code-blocks
+
+React code-block components for LoveUI.
+
+## Install
+
+```bash
+pnpm add @loveui/code-blocks
+```
+
+## Required Styles
+
+Import your project styles and at least one highlighter stylesheet.
+
+```css
+@import "@loveui/code-blocks/styles/globals.css";
+@import "@loveui/code-blocks/styles/shiki.css";
+/* or */
+@import "@loveui/code-blocks/styles/sugar-high.css";
+```
+
+## Usage
+
+```tsx
+import {
+  CodeBlock,
+  CodeBlockHeader,
+  CodeBlockContent,
+  CodeBlockGroup,
+  CodeBlockIcon,
+  CopyButton,
+  CodeblockShiki,
+} from "@loveui/code-blocks";
+
+const code = "console.log('LoveUI');";
+
+export function Example() {
+  return (
+    <CodeBlock>
+      <CodeBlockHeader>
+        <CodeBlockGroup>
+          <CodeBlockIcon language="ts" />
+          <span>example.ts</span>
+        </CodeBlockGroup>
+        <CopyButton content={code} />
+      </CodeBlockHeader>
+      <CodeBlockContent>
+        <CodeblockShiki code={code} language="ts" />
+      </CodeBlockContent>
+    </CodeBlock>
+  );
+}
+```
+
+## Exports
+
+- Code block primitives: `CodeBlock`, `CodeBlockHeader`, `CodeBlockContent`, `CodeBlockGroup`, `CodeBlockIcon`
+- Highlighters: `CodeblockShiki`, `CodeBlockSugarHigh`
+- MDX helpers: `PreShikiComponent`, `PreSugarHighComponent`
+- Blocks: `InlineCode`, `MultiTabs`, `CodeBlockSelectPkg`, `CodeBlockTabsPkg`
+- Utilities: `cn`, `copyToClipboard`, `reactToText`, `highlight`, `sugarHighHighlight`
+- Store: `usePackageManager`

package/packages/code-block/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/packages/code-block/package.json

@@ -1,28 +1,52 @@
 {
-  "name": "@loveui/code-block",
-  "description": "Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.",
+  "name": "@loveui/code-blocks",
   "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "files": [
+    "src",
+    "components.json",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./components/*": "./src/components/*",
+    "./utils/*": "./src/utils/*",
+    "./stores/*": "./src/stores/*",
+    "./styles/globals.css": "./src/styles/globals.css",
+    "./styles/shiki.css": "./src/styles/shiki.css",
+    "./styles/sugar-high.css": "./src/styles/sugar-high.css",
+    "./components.json": "./components.json"
+  },
+  "scripts": {
+    "check-types": "tsc --noEmit"
+  },
   "dependencies": {
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
-    "@loveui/shadcn-ui": "^0.1.0",
-    "@shikijs/transformers": "^3.13.0",
-    "lucide-react": "^0.545.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-icons": "^5.5.0",
-    "shiki": "3.13.0"
+    "@base-ui/react": "1.1.0",
+    "@react-symbols/icons": "1.3.0",
+    "@shikijs/langs": "3.22.0",
+    "@shikijs/themes": "3.22.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "lucide-react": "0.563.0",
+    "shiki": "3.22.0",
+    "sugar-high": "0.9.5",
+    "tailwind-merge": "3.4.0",
+    "tw-animate-css": "1.4.0",
+    "zustand": "5.0.11"
   },
-  "devDependencies": {
-    "@loveui/typescript-config": "^0.1.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.1",
-    "typescript": "^5.9.3"
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=4"
   },
-  "files": [
-    "dist",
-    "*.ts",
-    "*.tsx",
-    "*.css",
-    "*.mdx"
-  ]
+  "devDependencies": {
+    "@types/mdx": "2.0.13",
+    "@types/react": "19.2.10",
+    "@types/react-dom": "19.2.3",
+    "typescript": "5.9.3"
+  }
 }

package/packages/code-block/src/components/code-block/blocks/copy-with-select-package-manager.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useState, type FC, type SVGProps } from "react";
+import {
+  usePackageManager,
+  type PackageManager,
+} from "../../../stores/packageManager";
+
+import {
+  CodeBlock,
+  CodeBlockContent,
+  CodeBlockHeader,
+  CodeBlockIcon,
+} from "../code-block";
+import { CopyButton } from "../copy-button";
+import { CodeblockShiki } from "../client/shiki";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../ui/dropdown-menu";
+
+import { cn } from "../../../utils/cn";
+import { Bun, NPM, PNPM, Yarn } from "@react-symbols/icons";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+
+interface CodeBlockSelectPkgProps {
+  command: string;
+  title: string;
+  type: "install" | "dlx";
+}
+
+interface Command {
+  name: PackageManager;
+  install: string;
+  icon: FC<SVGProps<SVGSVGElement>>;
+  dlx: string;
+}
+
+const Commands: Command[] = [
+  {
+    name: "npm",
+    install: "npm i",
+    icon: NPM,
+    dlx: "npx",
+  },
+  {
+    name: "pnpm",
+    install: "pnpm i",
+    icon: PNPM,
+    dlx: "pnpm dlx",
+  },
+  {
+    name: "yarn",
+    install: "yarn add",
+    icon: Yarn,
+    dlx: "yarn dlx",
+  },
+  {
+    name: "bun",
+    install: "bun add",
+    icon: Bun,
+    dlx: "bunx --bun",
+  },
+];
+
+const SelectPackageManager = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { packageManager, setPackageManager } = usePackageManager();
+
+  const selectedPkg =
+    Commands.find((pkg) => pkg.name === packageManager) ?? Commands[0];
+  const Icon = selectedPkg.icon;
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger
+        title="Select Package Manager"
+        className="group flex cursor-pointer items-center space-x-1 px-2"
+      >
+        <Icon className="size-4" />
+        <ChevronDownIcon
+          size={13}
+          className={cn(
+            "transform transition-transform duration-200 ease-in-out",
+            "group-hover:text-black dark:group-hover:text-white",
+            isOpen && "rotate-180 text-black dark:text-white",
+          )}
+        />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" alignOffset={2}>
+        {Commands.map((pkg) => {
+          const PkgIcon = pkg.icon;
+          return (
+            <DropdownMenuItem
+              key={pkg.name}
+              title={`Using ${pkg.name}`}
+              onClick={() => setPackageManager(pkg.name)}
+              className="flex w-full items-center justify-between"
+            >
+              <div className="flex items-center space-x-2">
+                <PkgIcon className="size-4" />
+                <span>{pkg.name}</span>
+              </div>
+              {selectedPkg.name === pkg.name && <CheckIcon width={14} />}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const CodeBlockSelectPkg = ({
+  title,
+  type,
+  command,
+}: CodeBlockSelectPkgProps) => {
+  const { packageManager } = usePackageManager();
+
+  const selectedPkg =
+    Commands.find((pkg) => pkg.name === packageManager) ?? Commands[0];
+  const fullCommand = `${selectedPkg[type]} ${command}`;
+
+  return (
+    <CodeBlock>
+      <CodeBlockHeader>
+        <div className="flex items-center space-x-2">
+          <CodeBlockIcon language="bash" />
+          <span className="font-medium">{title}</span>
+        </div>
+        <div className="flex items-center space-x-2 divide-x divide-neutral-300 dark:divide-neutral-700">
+          <SelectPackageManager />
+          <CopyButton className="pl-1" content={fullCommand} />
+        </div>
+      </CodeBlockHeader>
+      <CodeBlockContent>
+        <CodeblockShiki language="bash" code={fullCommand} />
+      </CodeBlockContent>
+    </CodeBlock>
+  );
+};
+
+export { CodeBlockSelectPkg, SelectPackageManager };

package/packages/code-block/src/components/code-block/blocks/copy-with-tabs-package-manager.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import type { FC, SVGProps } from "react";
+import {
+  usePackageManager,
+  type PackageManager,
+} from "../../../stores/packageManager";
+
+import {
+  CodeBlock,
+  CodeBlockContent,
+  CodeBlockHeader,
+  CodeBlockIcon,
+} from "../code-block";
+import { CopyButton } from "../copy-button";
+import { CodeblockShiki } from "../client/shiki";
+
+import { Bun, NPM, PNPM, Yarn } from "@react-symbols/icons";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
+
+interface Command {
+  name: PackageManager;
+  install: string;
+  icon: FC<SVGProps<SVGSVGElement>>;
+  dlx: string;
+}
+
+interface CodeBlockTabsPkgProps {
+  command: string;
+  type: "install" | "dlx";
+}
+
+const Commands: Command[] = [
+  {
+    name: "npm",
+    install: "npm i",
+    icon: NPM,
+    dlx: "npx",
+  },
+  {
+    name: "pnpm",
+    install: "pnpm i",
+    icon: PNPM,
+    dlx: "pnpm dlx",
+  },
+  {
+    name: "yarn",
+    install: "yarn add",
+    icon: Yarn,
+    dlx: "yarn dlx",
+  },
+  {
+    name: "bun",
+    install: "bun add",
+    icon: Bun,
+    dlx: "bunx --bun",
+  },
+];
+
+const CodeBlockTabsPkg = ({ command, type }: CodeBlockTabsPkgProps) => {
+  const { packageManager, setPackageManager } = usePackageManager();
+
+  const selectedPkg =
+    Commands.find((pkg) => pkg.name === packageManager) ?? Commands[0];
+  const fullCommand = `${selectedPkg[type]} ${command}`;
+
+  return (
+    <Tabs
+      className="w-full gap-1"
+      value={packageManager}
+      onValueChange={(value) => setPackageManager(value as PackageManager)}
+    >
+      <CodeBlock>
+        <CodeBlockHeader>
+          <div className="flex items-center space-x-1">
+            <CodeBlockIcon language="bash" />
+            <TabsList className="gap-1 border-0 bg-transparent dark:bg-transparent">
+              {Commands.map((cmd) => {
+                const Icon = cmd.icon;
+                return (
+                  <TabsTrigger
+                    key={cmd.name}
+                    value={cmd.name}
+                    className="data-[state=active]:shadow-none"
+                  >
+                    <Icon className="size-4" />
+                    <span>{cmd.name}</span>
+                  </TabsTrigger>
+                );
+              })}
+            </TabsList>
+          </div>
+          <CopyButton className="pl-1" content={fullCommand} />
+        </CodeBlockHeader>
+        <CodeBlockContent>
+          {Commands.map((cmd) => (
+            <TabsContent key={cmd.name} value={cmd.name} className="mt-0">
+              <CodeblockShiki
+                language="bash"
+                code={`${cmd[type]} ${command}`}
+              />
+            </TabsContent>
+          ))}
+        </CodeBlockContent>
+      </CodeBlock>
+    </Tabs>
+  );
+};
+
+export { CodeBlockTabsPkg };

package/packages/code-block/src/components/code-block/blocks/inline-code.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import type { Languages } from "../../../utils/shiki/highlight";
+
+import {
+  CodeBlock,
+  CodeBlockContent,
+} from "../code-block";
+import { CopyButton } from "../copy-button";
+import { CodeblockShiki } from "../client/shiki";
+
+interface InlineCodeProps {
+  code: string;
+  language?: Languages;
+}
+
+const InlineCode = ({ code, language = "bash" }: InlineCodeProps) => {
+  return (
+    <CodeBlock>
+      <CodeBlockContent className="flex w-full items-center justify-between">
+        <CodeblockShiki language={language} code={code} />
+        <CopyButton className="px-3" content={code} />
+      </CodeBlockContent>
+    </CodeBlock>
+  );
+};
+
+export default InlineCode;

package/packages/code-block/src/components/code-block/blocks/multi-tabs.tsx

@@ -0,0 +1,118 @@
+import type { Languages } from "../../../utils/shiki/highlight";
+
+import {
+  CodeBlock,
+  CodeBlockContent,
+  CodeBlockHeader,
+  CodeBlockIcon,
+} from "../code-block";
+import { CopyButton } from "../copy-button";
+import { CodeblockShiki } from "../client/shiki";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
+
+const Code = [
+  {
+    title: "layout.tsx",
+    lang: "tsx",
+    code: `import "./globals.css";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}`,
+  },
+  {
+    title: "page.tsx",
+    lang: "tsx",
+    code: `export default function Home() {
+  return (
+    <div>
+      <p>Home page</p>
+    </div>
+  );
+}`,
+  },
+  {
+    title: "globals.css",
+    lang: "css",
+    code: `@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}`,
+  },
+];
+
+const CopyWithTabsCode = () => {
+  return (
+    <Tabs className="w-full gap-1">
+      <CodeBlock>
+        <CodeBlockHeader>
+          <div className="flex items-center space-x-1">
+            <TabsList className="gap-1 border-0 bg-transparent dark:bg-transparent">
+              {Code.map((c) => {
+                return (
+                  <TabsTrigger
+                    value={c.title}
+                    key={c.title}
+                    className="data-[state=active]:bg-transparent"
+                  >
+                    <CodeBlockIcon language={c.lang} />
+                    <span>{c.title}</span>
+                  </TabsTrigger>
+                );
+              })}
+            </TabsList>
+          </div>
+        </CodeBlockHeader>
+        <CodeBlockContent className="relative">
+          {Code.map((cmd) => (
+            <TabsContent key={cmd.title} value={cmd.title}>
+              <div className="relative">
+                <CopyButton
+                  content={cmd.code}
+                  className="sticky top-2.5 right-2.5 z-10 float-right -mb-10 p-1"
+                />
+                <CodeblockShiki
+                  code={cmd.code}
+                  language={cmd.lang as Languages}
+                />
+              </div>
+            </TabsContent>
+          ))}
+        </CodeBlockContent>
+      </CodeBlock>
+    </Tabs>
+  );
+};
+
+export default CopyWithTabsCode;