New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

shadcn-ui

Package Overview
Dependencies
Maintainers
2
Versions
47
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

shadcn-ui - npm Package Compare versions

Comparing version 0.0.0-beta.9a5085d to 0.0.0-beta.9fba033

532

dist/index.js
#!/usr/bin/env node
import{existsSync as Y,promises as Te}from"fs";import K from"path";import ne from"path";import{createMatchPath as Ue}from"tsconfig-paths";async function j(t,e){return Ue(e.absoluteBaseUrl,e.paths)(t,void 0,()=>!0,[".ts",".tsx"])}import{cosmiconfig as Ke}from"cosmiconfig";import{loadConfig as Be}from"tsconfig-paths";import*as g from"zod";var ie="@/components",se="@/lib/utils",ae="app/globals.css",ce="tailwind.config.js";var Me=Ke("components",{searchPlaces:["components.json"]}),D=g.object({$schema:g.string().optional(),style:g.string(),rsc:g.coerce.boolean().default(!1),tsx:g.coerce.boolean().default(!0),tailwind:g.object({config:g.string(),css:g.string(),baseColor:g.string(),cssVariables:g.boolean().default(!0),prefix:g.string().default("").optional()}),aliases:g.object({components:g.string(),utils:g.string(),ui:g.string().optional()})}).strict(),Ve=D.extend({resolvedPaths:g.object({tailwindConfig:g.string(),tailwindCss:g.string(),utils:g.string(),components:g.string(),ui:g.string()})});async function C(t){let e=await Je(t);return e?await b(t,e):null}async function b(t,e){let o=await Be(t);if(o.resultType==="failed")throw new Error(`Failed to load ${e.tsx?"tsconfig":"jsconfig"}.json. ${o.message??""}`.trim());return Ve.parse({...e,resolvedPaths:{tailwindConfig:ne.resolve(t,e.tailwind.config),tailwindCss:ne.resolve(t,e.tailwind.css),utils:await j(e.aliases.utils,o),components:await j(e.aliases.components,o),ui:e.aliases.ui?await j(e.aliases.ui,o):await j(e.aliases.components,o)}})}async function Je(t){try{let e=await Me.search(t);return e?D.parse(e.config):null}catch{throw new Error(`Invalid configuration found in ${t}/components.json.`)}}import{detect as Ge}from"@antfu/ni";async function L(t){let e=await Ge({programmatic:!0,cwd:t});return e==="yarn@berry"?"yarn":e==="pnpm@6"?"pnpm":e==="bun"?"bun":e??"npm"}import F from"chalk";var p={error(...t){console.log(F.red(...t))},warn(...t){console.log(F.yellow(...t))},info(...t){console.log(F.cyan(...t))},success(...t){console.log(F.green(...t))},break(){console.log("")}};function I(t){typeof t=="string"&&(p.error(t),process.exit(1)),t instanceof Error&&(p.error(t.message),process.exit(1)),p.error("Something went wrong. Please try again."),process.exit(1)}import Ye from"path";import*as a from"zod";var le=a.object({name:a.string(),dependencies:a.array(a.string()).optional(),devDependencies:a.array(a.string()).optional(),registryDependencies:a.array(a.string()).optional(),files:a.array(a.string()),type:a.enum(["components:ui","components:component","components:example"])}),pe=a.array(le),He=le.extend({files:a.array(a.object({name:a.string(),content:a.string()}))}),me=a.array(He),fe=a.array(a.object({name:a.string(),label:a.string()})),de=a.object({inlineColors:a.object({light:a.record(a.string(),a.string()),dark:a.record(a.string(),a.string())}),cssVars:a.object({light:a.record(a.string(),a.string()),dark:a.record(a.string(),a.string())}),inlineColorsTemplate:a.string(),cssVarsTemplate:a.string()});import{HttpsProxyAgent as qe}from"https-proxy-agent";import Xe from"node-fetch";var ge=process.env.COMPONENTS_REGISTRY_URL??"https://ui.shadcn.com",Ze=process.env.https_proxy?new qe(process.env.https_proxy):void 0;async function N(){try{let[t]=await _(["index.json"]);return pe.parse(t)}catch{throw new Error("Failed to fetch components from registry.")}}async function V(){try{let[t]=await _(["styles/index.json"]);return fe.parse(t)}catch{throw new Error("Failed to fetch styles from registry.")}}async function J(){return[{name:"slate",label:"Slate"},{name:"gray",label:"Gray"},{name:"zinc",label:"Zinc"},{name:"neutral",label:"Neutral"},{name:"stone",label:"Stone"}]}async function z(t){try{let[e]=await _([`colors/${t}.json`]);return de.parse(e)}catch{throw new Error("Failed to fetch base color from registry.")}}async function G(t,e){let o=[];for(let r of e){let n=t.find(i=>i.name===r);if(n&&(o.push(n),n.registryDependencies)){let i=await G(t,n.registryDependencies);o.push(...i)}}return o.filter((r,n,i)=>i.findIndex(s=>s.name===r.name)===n)}async function O(t,e){try{let o=e.map(n=>`styles/${t}/${n.name}.json`),r=await _(o);return me.parse(r)}catch{throw new Error("Failed to fetch tree from registry.")}}async function W(t,e,o){if(o)return o;if(e.type==="components:ui"&&t.aliases.ui)return t.resolvedPaths.ui;let[r,n]=e.type.split(":");return r in t.resolvedPaths?Ye.join(t.resolvedPaths[r],n):null}async function _(t){try{return await Promise.all(t.map(async o=>await(await Xe(`${ge}/registry/${o}`,{agent:Ze})).json()))}catch(e){throw console.log(e),new Error(`Failed to fetch registry from ${ge}.`)}}import{promises as at}from"fs";import{tmpdir as ct}from"os";import ve from"path";import{SyntaxKind as Qe}from"ts-morph";var ue=async({sourceFile:t,config:e,baseColor:o})=>(e.tailwind?.cssVariables||!o?.inlineColors||t.getDescendantsOfKind(Qe.StringLiteral).forEach(r=>{let n=r.getText();if(n){let i=tt(n.replace(/"/g,""),o.inlineColors);r.replaceWithText(`"${i.trim()}"`)}}),t);function H(t){if(!t.includes("/")&&!t.includes(":"))return[null,t,null];let e=[],[o,r]=t.split("/");if(!o.includes(":"))return[null,o,r];let n=o.split(":"),i=n.pop(),s=n.join(":");return e.push(s??null,i??null,r??null),e}var et=["bg-","text-","border-","ring-offset-","ring-"];function tt(t,e){t.includes(" border ")&&(t=t.replace(" border "," border border-border "));let o=t.split(" "),r=new Set,n=new Set;for(let i of o){let[s,m,f]=H(i),h=et.find(c=>m?.startsWith(c));if(!h){r.has(i)||r.add(i);continue}let l=m?.replace(h,"");if(l&&l in e.light){r.add([s,`${h}${e.light[l]}`].filter(Boolean).join(":")+(f?`/${f}`:"")),n.add(["dark",s,`${h}${e.dark[l]}`].filter(Boolean).join(":")+(f?`/${f}`:""));continue}r.has(i)||r.add(i)}return[...Array.from(r),...Array.from(n)].join(" ").trim()}var he=async({sourceFile:t,config:e})=>{let o=t.getImportDeclarations();for(let r of o){let n=r.getModuleSpecifierValue();n.startsWith("@/registry/")&&(e.aliases.ui?r.setModuleSpecifier(n.replace(/^@\/registry\/[^/]+\/ui/,e.aliases.ui)):r.setModuleSpecifier(n.replace(/^@\/registry\/[^/]+/,e.aliases.components))),n=="@/lib/utils"&&r.getNamedImports().find(m=>m.getName()==="cn")&&r.setModuleSpecifier(n.replace(/^@\/lib\/utils/,e.aliases.utils))}return t};import{transformFromAstSync as rt}from"@babel/core";import{parse as ot}from"@babel/parser";import nt from"@babel/plugin-transform-typescript";import*as R from"recast";var it={sourceType:"module",allowImportExportEverywhere:!0,allowReturnOutsideFunction:!0,startLine:1,tokens:!0,plugins:["asyncGenerators","bigInt","classPrivateMethods","classPrivateProperties","classProperties","classStaticBlock","decimal","decorators-legacy","doExpressions","dynamicImport","exportDefaultFrom","exportNamespaceFrom","functionBind","functionSent","importAssertions","importMeta","nullishCoalescingOperator","numericSeparator","objectRestSpread","optionalCatchBinding","optionalChaining",["pipelineOperator",{proposal:"minimal"}],["recordAndTuple",{syntaxType:"hash"}],"throwExpressions","topLevelAwait","v8intrinsic","typescript","jsx"]},xe=async({sourceFile:t,config:e})=>{let o=t.getFullText();if(e.tsx)return o;let r=R.parse(o,{parser:{parse:i=>ot(i,it)}}),n=rt(r,o,{cloneInputAst:!1,code:!1,ast:!0,plugins:[nt],configFile:!1});if(!n||!n.ast)throw new Error("Failed to transform JSX");return R.print(n.ast).code};import{SyntaxKind as st}from"ts-morph";var ye=async({sourceFile:t,config:e})=>{if(e.rsc)return t;let o=t.getFirstChildByKind(st.ExpressionStatement);return o?.getText()==='"use client"'&&o.remove(),t};import{Project as lt,ScriptKind as pt}from"ts-morph";import{SyntaxKind as u}from"ts-morph";var we=async({sourceFile:t,config:e})=>(e.tailwind?.prefix&&(t.getDescendantsOfKind(u.CallExpression).filter(o=>o.getExpression().getText()==="cva").forEach(o=>{if(o.getArguments()[0]?.isKind(u.StringLiteral)){let r=o.getArguments()[0];r&&r.replaceWithText(`"${y(r.getText()?.replace(/"/g,""),e.tailwind.prefix)}"`)}o.getArguments()[1]?.isKind(u.ObjectLiteralExpression)&&o.getArguments()[1]?.getDescendantsOfKind(u.PropertyAssignment).find(r=>r.getName()==="variants")?.getDescendantsOfKind(u.PropertyAssignment).forEach(r=>{r.getDescendantsOfKind(u.PropertyAssignment).forEach(n=>{let i=n.getInitializerIfKind(u.StringLiteral);i&&i?.replaceWithText(`"${y(i.getText()?.replace(/"/g,""),e.tailwind.prefix)}"`)})})}),t.getDescendantsOfKind(u.JsxAttribute).forEach(o=>{if(o.getName()==="className"){if(o.getInitializer()?.isKind(u.StringLiteral)){let r=o.getInitializer();r&&r.replaceWithText(`"${y(r.getText()?.replace(/"/g,""),e.tailwind.prefix)}"`)}if(o.getInitializer()?.isKind(u.JsxExpression)){let r=o.getInitializer()?.getDescendantsOfKind(u.CallExpression).find(n=>n.getExpression().getText()==="cn");r&&r.getArguments().forEach(n=>{(n.isKind(u.ConditionalExpression)||n.isKind(u.BinaryExpression))&&n.getChildrenOfKind(u.StringLiteral).forEach(i=>{i.replaceWithText(`"${y(i.getText()?.replace(/"/g,""),e.tailwind.prefix)}"`)}),n.isKind(u.StringLiteral)&&n.replaceWithText(`"${y(n.getText()?.replace(/"/g,""),e.tailwind.prefix)}"`)})}}o.getName()==="classNames"&&o.getInitializer()?.isKind(u.JsxExpression)&&o.getDescendantsOfKind(u.PropertyAssignment).forEach(r=>{if(r.getInitializer()?.isKind(u.CallExpression)){let n=r.getInitializerIfKind(u.CallExpression);n&&n.getArguments().forEach(i=>{i.isKind(u.ConditionalExpression)&&i.getChildrenOfKind(u.StringLiteral).forEach(s=>{s.replaceWithText(`"${y(s.getText()?.replace(/"/g,""),e.tailwind.prefix)}"`)}),i.isKind(u.StringLiteral)&&i.replaceWithText(`"${y(i.getText()?.replace(/"/g,""),e.tailwind.prefix)}"`)})}if(r.getInitializer()?.isKind(u.StringLiteral)&&r.getName()!=="variant"){let n=r.getInitializer();n&&n.replaceWithText(`"${y(n.getText()?.replace(/"/g,""),e.tailwind.prefix)}"`)}})})),t);function y(t,e=""){let o=t.split(" "),r=[];for(let n of o){let[i,s,m]=H(n);i?m?r.push(`${i}:${e}${s}/${m}`):r.push(`${i}:${e}${s}`):m?r.push(`${e}${s}/${m}`):r.push(`${e}${s}`)}return r.join(" ")}function Ce(t,e){let o=t.split(`
`);for(let r of o)if(r.includes("@apply")){let n=r.replace("@apply","").trim(),i=y(n,e);t=t.replace(n,i)}return t}var mt=[he,ye,ue,we],ft=new lt({compilerOptions:{}});async function dt(t){let e=await at.mkdtemp(ve.join(ct(),"shadcn-"));return ve.join(e,t)}async function U(t){let e=await dt(t.filename),o=ft.createSourceFile(e,t.raw,{scriptKind:pt.TSX});for(let r of mt)r({sourceFile:o,...t});return await xe({sourceFile:o,...t})}import Se from"chalk";import{Command as gt}from"commander";import{execa as be}from"execa";import ut from"ora";import q from"prompts";import*as x from"zod";var ht=x.object({components:x.array(x.string()).optional(),yes:x.boolean(),overwrite:x.boolean(),cwd:x.string(),all:x.boolean(),path:x.string().optional()}),Ie=new gt().name("add").description("add a component to your project").argument("[components...]","the components to add").option("-y, --yes","skip confirmation prompt.",!0).option("-o, --overwrite","overwrite existing files.",!1).option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",process.cwd()).option("-a, --all","add all available components",!1).option("-p, --path <path>","the path to add the component to.").action(async(t,e)=>{try{let o=ht.parse({components:t,...e}),r=K.resolve(o.cwd);Y(r)||(p.error(`The path ${r} does not exist. Please try again.`),process.exit(1));let n=await C(r);n||(p.warn(`Configuration is missing. Please run ${Se.green("init")} to create a components.json file.`),process.exit(1));let i=await N(),s=o.all?i.map(c=>c.name):o.components;if(!o.components?.length&&!o.all){let{components:c}=await q({type:"multiselect",name:"components",message:"Which components would you like to add?",hint:"Space to select. A to toggle all. Enter to submit.",instructions:!1,choices:i.map(d=>({title:d.name,value:d.name,selected:o.all?!0:o.components?.includes(d.name)}))});s=c}s?.length||(p.warn("No components selected. Exiting."),process.exit(0));let m=await G(i,s),f=await O(n.style,m),h=await z(n.tailwind.baseColor);if(f.length||(p.warn("Selected components not found. Exiting."),process.exit(0)),!o.yes){let{proceed:c}=await q({type:"confirm",name:"proceed",message:"Ready to install components and dependencies. Proceed?",initial:!0});c||process.exit(0)}let l=ut("Installing components...").start();for(let c of f){l.text=`Installing ${c.name}...`;let d=await W(n,c,o.path?K.resolve(r,o.path):void 0);if(!d)continue;if(Y(d)||await Te.mkdir(d,{recursive:!0}),c.files.filter(T=>Y(K.resolve(d,T.name))).length&&!o.overwrite)if(s.includes(c.name)){l.stop();let{overwrite:T}=await q({type:"confirm",name:"overwrite",message:`Component ${c.name} already exists. Would you like to overwrite?`,initial:!1});if(!T){p.info(`Skipped ${c.name}. To overwrite, run with the ${Se.green("--overwrite")} flag.`);continue}l.start(`Installing ${c.name}...`)}else continue;for(let T of c.files){let $=K.resolve(d,T.name),Re=await U({filename:T.name,raw:T.content,config:n,baseColor:h});n.tsx||($=$.replace(/\.tsx$/,".jsx"),$=$.replace(/\.ts$/,".js")),await Te.writeFile($,Re)}let k=await L(r);c.dependencies?.length&&await be(k,[k==="npm"?"install":"add",...c.dependencies],{cwd:r}),c.devDependencies?.length&&await be(k,[k==="npm"?"install":"add","-D",...c.devDependencies],{cwd:r})}l.succeed("Done.")}catch(o){I(o)}});import{existsSync as X,promises as xt}from"fs";import Z from"path";import A from"chalk";import{Command as yt}from"commander";import{diffLines as wt}from"diff";import*as v from"zod";var Ct=v.object({component:v.string().optional(),yes:v.boolean(),cwd:v.string(),path:v.string().optional()}),Ee=new yt().name("diff").description("check for updates against the registry").argument("[component]","the component name").option("-y, --yes","skip confirmation prompt.",!1).option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",process.cwd()).action(async(t,e)=>{try{let o=Ct.parse({component:t,...e}),r=Z.resolve(o.cwd);X(r)||(p.error(`The path ${r} does not exist. Please try again.`),process.exit(1));let n=await C(r);n||(p.warn(`Configuration is missing. Please run ${A.green("init")} to create a components.json file.`),process.exit(1));let i=await N();if(!o.component){let f=n.resolvedPaths.components,h=i.filter(c=>{for(let d of c.files){let w=Z.resolve(f,d);if(X(w))return!0}return!1}),l=[];for(let c of h){let d=await ze(c,n);d.length&&l.push({name:c.name,changes:d})}l.length||(p.info("No updates found."),process.exit(0)),p.info("The following components have updates available:");for(let c of l){p.info(`- ${c.name}`);for(let d of c.changes)p.info(` - ${d.filePath}`)}p.break(),p.info(`Run ${A.green("diff <component>")} to see the changes.`),process.exit(0)}let s=i.find(f=>f.name===o.component);s||(p.error(`The component ${A.green(o.component)} does not exist.`),process.exit(1));let m=await ze(s,n);m.length||(p.info(`No updates found for ${o.component}.`),process.exit(0));for(let f of m)p.info(`- ${f.filePath}`),await vt(f.patch),p.info("")}catch(o){I(o)}});async function ze(t,e){let o=await O(e.style,[t]),r=await z(e.tailwind.baseColor),n=[];for(let i of o){let s=await W(e,i);if(s)for(let m of i.files){let f=Z.resolve(s,m.name);if(!X(f))continue;let h=await xt.readFile(f,"utf8"),l=await U({filename:m.name,raw:m.content,config:e,baseColor:r}),c=wt(l,h);c.length>1&&n.push({file:m.name,filePath:f,patch:c})}}return n}async function vt(t){t.forEach(e=>{if(e)return e.added?process.stdout.write(A.green(e.value)):e.removed?process.stdout.write(A.red(e.value)):process.stdout.write(e.value)})}import{existsSync as Oe,promises as E}from"fs";import P from"path";import B from"path";import ee from"fast-glob";import Q,{pathExists as Tt}from"fs-extra";import{loadConfig as St}from"tsconfig-paths";var te=["**/node_modules/**",".next","public","dist","build"];async function Pe(t){let e=await C(t);if(e)return e;let o=await bt(t),r=await It(t),n=await zt(t);if(!o||!r||!n)return null;let i=await Et(t),s={$schema:"https://ui.shadcn.com/schema.json",rsc:["next-app","next-app-src"].includes(o),tsx:i,style:"new-york",tailwind:{config:i?"tailwind.config.ts":"tailwind.config.js",baseColor:"zinc",css:r,cssVariables:!0,prefix:""},aliases:{utils:`${n}/lib/utils`,components:`${n}/components`}};return await b(t,s)}async function bt(t){if(!(await ee.glob("**/*",{cwd:t,deep:3,ignore:te})).find(i=>i.startsWith("next.config.")))return null;let r=await Q.pathExists(B.resolve(t,"src"));return await Q.pathExists(B.resolve(t,`${r?"src/":""}app`))?r?"next-app-src":"next-app":r?"next-pages-src":"next-pages"}async function It(t){let e=await ee.glob("**/*.css",{cwd:t,deep:3,ignore:te});if(!e.length)return null;for(let o of e)if((await Q.readFile(B.resolve(t,o),"utf8")).includes("@tailwind base"))return o;return null}async function zt(t){let e=await St(t);if(e?.resultType==="failed"||!e?.paths)return null;for(let[o,r]of Object.entries(e.paths))if(r.includes("./*")||r.includes("./src/*"))return o.at(0);return null}async function Et(t){return Tt(B.resolve(t,"tsconfig.json"))}async function $e(t){if(!(await ee.glob("tailwind.config.*",{cwd:t,deep:3,ignore:te})).length)throw new Error("Tailwind CSS is not installed. Visit https://tailwindcss.com/docs/installation to get started.");return!0}var je=`import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
// src/index.ts
import { existsSync as existsSync2, promises as fs3 } from "fs";
import path3 from "path";
import { Command } from "commander";
import { execa } from "execa";
import ora from "ora";
import prompts from "prompts";
// src/utils/get-components.ts
import fetch from "node-fetch";
import * as z from "zod";
var baseUrl = process.env.COMPONENTS_BASE_URL ?? "https://ui.shadcn.com";
var componentSchema = z.object({
component: z.string(),
name: z.string(),
dependencies: z.array(z.string()).optional(),
files: z.array(
z.object({
name: z.string(),
dir: z.string(),
content: z.string()
})
)
});
var componentsSchema = z.array(componentSchema);
async function getAvailableComponents() {
try {
const response = await fetch(`${baseUrl}/api/components`);
const components = await response.json();
return componentsSchema.parse(components);
} catch (error) {
throw new Error(
`Failed to fetch components from ${baseUrl}/api/components.`
);
}
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
`,De=`import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"
// src/utils/get-package-info.ts
import path from "path";
import fs from "fs-extra";
function getPackageInfo() {
const packageJsonPath = path.join("package.json");
return fs.readJSONSync(packageJsonPath);
export function cn(...inputs) {
return twMerge(clsx(inputs))
}
// src/utils/get-package-manager.ts
function getPackageManager() {
const userAgent = process.env.npm_config_user_agent;
if (!userAgent) {
return "npm";
}
if (userAgent.startsWith("yarn")) {
return "yarn";
}
if (userAgent.startsWith("pnpm")) {
return "pnpm";
}
return "npm";
}
// src/utils/get-project-info.ts
import { existsSync } from "fs";
import path2 from "path";
import fs2 from "fs-extra";
async function getProjectInfo() {
const info = {
tsconfig: null,
alias: null,
srcDir: false,
appDir: false
};
try {
const tsconfig = await getTsConfig();
const paths = tsconfig?.compilerOptions?.paths;
const alias = paths ? Object.keys(paths)[0].replace("*", "") : null;
return {
tsconfig,
alias,
srcDir: existsSync(path2.resolve("./src")),
appDir: existsSync(path2.resolve("./app")) || existsSync(path2.resolve("./src/app"))
};
} catch (error) {
return info;
}
}
async function getTsConfig() {
try {
const tsconfigPath = path2.join("tsconfig.json");
const tsconfig = await fs2.readJSON(tsconfigPath);
if (!tsconfig) {
throw new Error("tsconfig.json is missing");
}
return tsconfig;
} catch (error) {
return null;
}
}
// src/utils/logger.ts
import chalk from "chalk";
var logger = {
error(...args) {
console.log(chalk.red(...args));
`,Ae=`/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{<%- extension %>,<%- extension %>x}',
'./components/**/*.{<%- extension %>,<%- extension %>x}',
'./app/**/*.{<%- extension %>,<%- extension %>x}',
'./src/**/*.{<%- extension %>,<%- extension %>x}',
],
prefix: "<%- prefix %>",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
warn(...args) {
console.log(chalk.yellow(...args));
plugins: [require("tailwindcss-animate")],
}`,ke=`/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{<%- extension %>,<%- extension %>x}',
'./components/**/*.{<%- extension %>,<%- extension %>x}',
'./app/**/*.{<%- extension %>,<%- extension %>x}',
'./src/**/*.{<%- extension %>,<%- extension %>x}',
],
prefix: "<%- prefix %>",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
info(...args) {
console.log(chalk.cyan(...args));
plugins: [require("tailwindcss-animate")],
}`,Le=`import type { Config } from "tailwindcss"
const config = {
darkMode: ["class"],
content: [
'./pages/**/*.{<%- extension %>,<%- extension %>x}',
'./components/**/*.{<%- extension %>,<%- extension %>x}',
'./app/**/*.{<%- extension %>,<%- extension %>x}',
'./src/**/*.{<%- extension %>,<%- extension %>x}',
],
prefix: "<%- prefix %>",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
success(...args) {
console.log(chalk.green(...args));
}
};
plugins: [require("tailwindcss-animate")],
} satisfies Config
// src/utils/templates.ts
var STYLES = `@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
--ring: 215 20.2% 65.1%;
--radius: 0.5rem;
}
.dark {
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--muted: 223 47% 11%;
--muted-foreground: 215.4 16.3% 56.9%;
--popover: 224 71% 4%;
--popover-foreground: 215 20.2% 65.1%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--border: 216 34% 17%;
--input: 216 34% 17%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 1.2%;
--secondary: 222.2 47.4% 11.2%;
--secondary-foreground: 210 40% 98%;
--accent: 216 34% 17%;
--accent-foreground: 210 40% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--ring: 216 34% 17%;
--radius: 0.5rem;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
}
}`;
var UTILS = `import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
`;
var TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */
module.exports = {
export default config`,Fe=`import type { Config } from "tailwindcss"
const config = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./pages/**/*.{<%- extension %>,<%- extension %>x}',
'./components/**/*.{<%- extension %>,<%- extension %>x}',
'./app/**/*.{<%- extension %>,<%- extension %>x}',
'./src/**/*.{<%- extension %>,<%- extension %>x}',
],
prefix: "<%- prefix %>",
theme: {

@@ -266,3 +228,3 @@ container: {

"accordion-down": {
from: { height: 0 },
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },

@@ -272,3 +234,3 @@ },

from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
to: { height: "0" },
},

@@ -283,163 +245,5 @@ },

plugins: [require("tailwindcss-animate")],
}`;
} satisfies Config
// src/index.ts
process.on("SIGINT", () => process.exit(0));
process.on("SIGTERM", () => process.exit(0));
var PROJECT_DEPENDENCIES = [
"tailwindcss-animate",
"class-variance-authority",
"clsx",
"tailwind-merge",
"lucide-react"
];
async function main() {
const packageInfo = await getPackageInfo();
const projectInfo = await getProjectInfo();
const packageManager = getPackageManager();
const program = new Command().name("shadcn-ui").description("Add shadcn-ui components to your project").version(
packageInfo.version || "1.0.0",
"-v, --version",
"display the version number"
);
program.command("init").description("Configure your Next.js project.").option("-y, --yes", "Skip confirmation prompt.").action(async (options) => {
logger.warn(
"Running the following command will overwrite existing files."
);
logger.warn(
"Make sure you have committed your changes before proceeding."
);
logger.warn("");
logger.warn(
"This command assumes a Next.js project with TypeScript and Tailwind CSS."
);
logger.warn(
"If you don't have these, follow the manual steps at https://ui.shadcn.com/docs/installation."
);
logger.warn("");
if (!options.yes) {
const { proceed } = await prompts({
type: "confirm",
name: "proceed",
message: "Running this command will install dependencies and overwrite files. Proceed?",
initial: true
});
if (!proceed) {
process.exit(0);
}
}
const dependenciesSpinner = ora(`Installing dependencies...`).start();
await execa(packageManager, [
packageManager === "npm" ? "install" : "add",
...PROJECT_DEPENDENCIES
]);
dependenciesSpinner.succeed();
if (!projectInfo?.appDir) {
const stylesDir = projectInfo?.srcDir ? "./src/styles" : "./styles";
if (!existsSync2(path3.resolve(stylesDir))) {
await fs3.mkdir(path3.resolve(stylesDir), { recursive: true });
}
}
let stylesDestination = projectInfo?.srcDir ? "./src/styles/globals.css" : "./styles/globals.css";
if (projectInfo?.appDir) {
stylesDestination = projectInfo?.srcDir ? "./src/app/globals.css" : "./app/globals.css";
}
const stylesSpinner = ora(`Adding styles with CSS variables...`).start();
await fs3.writeFile(stylesDestination, STYLES, "utf8");
stylesSpinner.succeed();
const libDir = projectInfo?.srcDir ? "./src/lib" : "./lib";
if (!existsSync2(path3.resolve(libDir))) {
await fs3.mkdir(path3.resolve(libDir), { recursive: true });
}
const utilsDestination = projectInfo?.srcDir ? "./src/lib/utils.ts" : "./lib/utils.ts";
const utilsSpinner = ora(`Adding utils...`).start();
await fs3.writeFile(utilsDestination, UTILS, "utf8");
utilsSpinner.succeed();
const tailwindDestination = "./tailwind.config.js";
const tailwindSpinner = ora(`Updating tailwind.config.js...`).start();
await fs3.writeFile(tailwindDestination, TAILWIND_CONFIG, "utf8");
tailwindSpinner.succeed();
});
program.command("add").description("add components to your project").argument("[components...]", "name of components").action(async (components) => {
logger.warn(
"Running the following command will overwrite existing files."
);
logger.warn(
"Make sure you have committed your changes before proceeding."
);
logger.warn("");
const availableComponents = await getAvailableComponents();
if (!availableComponents?.length) {
logger.error(
"An error occurred while fetching components. Please try again."
);
process.exit(0);
}
let selectedComponents = availableComponents.filter(
(component) => components.includes(component.component)
);
if (!selectedComponents?.length) {
selectedComponents = await promptForComponents(availableComponents);
}
const dir = await promptForDestinationDir();
if (!selectedComponents?.length) {
logger.warn("No components selected. Nothing to install.");
process.exit(0);
}
const destinationDir = path3.resolve(dir);
if (!existsSync2(destinationDir)) {
const spinner = ora(`Creating ${dir}...`).start();
await fs3.mkdir(destinationDir, { recursive: true });
spinner.succeed();
}
logger.success(
`Installing ${selectedComponents.length} component(s) and dependencies...`
);
for (const component of selectedComponents) {
const componentSpinner = ora(`${component.name}...`).start();
for (const file of component.files) {
if (projectInfo?.alias) {
file.content = file.content.replace(/@\//g, projectInfo.alias);
}
const filePath = path3.resolve(dir, file.name);
await fs3.writeFile(filePath, file.content);
}
if (component.dependencies?.length) {
const dependencies = component.dependencies.join(" ");
await execa(packageManager, [
packageManager === "npm" ? "install" : "add",
dependencies
]);
}
componentSpinner.succeed(component.name);
}
});
program.parse();
}
async function promptForComponents(components) {
const { components: selectedComponents } = await prompts({
type: "autocompleteMultiselect",
name: "components",
message: "Which component(s) would you like to add?",
hint: "Space to select. A to select all. I to invert selection.",
instructions: false,
choices: components.map((component) => ({
title: component.name,
value: component
}))
});
return selectedComponents;
}
async function promptForDestinationDir() {
const { dir } = await prompts([
{
type: "text",
name: "dir",
message: "Where would you like to install the component(s)?",
initial: "./components/ui"
}
]);
return dir;
}
main();
export default config`;import oe from"chalk";import{Command as $t}from"commander";import{execa as jt}from"execa";import Dt from"lodash.template";import M from"ora";import re from"prompts";import*as S from"zod";var At=["tailwindcss-animate","class-variance-authority","clsx","tailwind-merge"],kt=S.object({cwd:S.string(),yes:S.boolean(),defaults:S.boolean()}),We=new $t().name("init").description("initialize your project and install dependencies").option("-y, --yes","skip confirmation prompt.",!1).option("-d, --defaults,","use default configuration.",!1).option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",process.cwd()).action(async t=>{try{let e=kt.parse(t),o=P.resolve(e.cwd);Oe(o)||(p.error(`The path ${o} does not exist. Please try again.`),process.exit(1)),$e(o);let r=await Pe(o);if(r){let n=await Ft(o,r,t.defaults);await Ne(o,n)}else{let n=await C(o),i=await Lt(o,n,e.yes);await Ne(o,i)}p.info(""),p.info(`${oe.green("Success!")} Project initialization completed. You may now add components.`),p.info("")}catch(e){I(e)}});async function Lt(t,e=null,o=!1){let r=l=>oe.cyan(l),n=await V(),i=await J(),s=await re([{type:"toggle",name:"typescript",message:`Would you like to use ${r("TypeScript")} (recommended)?`,initial:e?.tsx??!0,active:"yes",inactive:"no"},{type:"select",name:"style",message:`Which ${r("style")} would you like to use?`,choices:n.map(l=>({title:l.label,value:l.name}))},{type:"select",name:"tailwindBaseColor",message:`Which color would you like to use as ${r("base color")}?`,choices:i.map(l=>({title:l.label,value:l.name}))},{type:"text",name:"tailwindCss",message:`Where is your ${r("global CSS")} file?`,initial:e?.tailwind.css??ae},{type:"toggle",name:"tailwindCssVariables",message:`Would you like to use ${r("CSS variables")} for colors?`,initial:e?.tailwind.cssVariables??!0,active:"yes",inactive:"no"},{type:"text",name:"tailwindPrefix",message:`Are you using a custom ${r("tailwind prefix eg. tw-")}? (Leave blank if not)`,initial:""},{type:"text",name:"tailwindConfig",message:`Where is your ${r("tailwind.config.js")} located?`,initial:e?.tailwind.config??ce},{type:"text",name:"components",message:`Configure the import alias for ${r("components")}:`,initial:e?.aliases.components??ie},{type:"text",name:"utils",message:`Configure the import alias for ${r("utils")}:`,initial:e?.aliases.utils??se},{type:"toggle",name:"rsc",message:`Are you using ${r("React Server Components")}?`,initial:e?.rsc??!0,active:"yes",inactive:"no"}]),m=D.parse({$schema:"https://ui.shadcn.com/schema.json",style:s.style,tailwind:{config:s.tailwindConfig,css:s.tailwindCss,baseColor:s.tailwindBaseColor,cssVariables:s.tailwindCssVariables,prefix:s.tailwindPrefix},rsc:s.rsc,tsx:s.typescript,aliases:{utils:s.utils,components:s.components}});if(!o){let{proceed:l}=await re({type:"confirm",name:"proceed",message:`Write configuration to ${r("components.json")}. Proceed?`,initial:!0});l||process.exit(0)}p.info("");let f=M("Writing components.json...").start(),h=P.resolve(t,"components.json");return await E.writeFile(h,JSON.stringify(m,null,2),"utf8"),f.succeed(),await b(t,m)}async function Ft(t,e,o=!1){let r=l=>oe.cyan(l),n=e.style,i=e.tailwind.baseColor,s=e.tailwind.cssVariables;if(!o){let l=await V(),c=await J(),d=await re([{type:"select",name:"style",message:`Which ${r("style")} would you like to use?`,choices:l.map(w=>({title:w.label,value:w.name}))},{type:"select",name:"tailwindBaseColor",message:`Which color would you like to use as ${r("base color")}?`,choices:c.map(w=>({title:w.label,value:w.name}))},{type:"toggle",name:"tailwindCssVariables",message:`Would you like to use ${r("CSS variables")} for colors?`,initial:e?.tailwind.cssVariables,active:"yes",inactive:"no"}]);n=d.style,i=d.tailwindBaseColor,s=d.tailwindCssVariables}let m=D.parse({$schema:e?.$schema,style:n,tailwind:{...e?.tailwind,baseColor:i,cssVariables:s},rsc:e?.rsc,tsx:e?.tsx,aliases:e?.aliases});p.info("");let f=M("Writing components.json...").start(),h=P.resolve(t,"components.json");return await E.writeFile(h,JSON.stringify(m,null,2),"utf8"),f.succeed(),await b(t,m)}async function Ne(t,e){let o=M("Initializing project...")?.start();for(let[l,c]of Object.entries(e.resolvedPaths)){let d=P.extname(c)?P.dirname(c):c;l==="utils"&&c.endsWith("/utils")&&(d=d.replace(/\/utils$/,"")),Oe(d)||await E.mkdir(d,{recursive:!0})}let r=e.tsx?"ts":"js",n=P.extname(e.resolvedPaths.tailwindConfig),i;n===".ts"?i=e.tailwind.cssVariables?Fe:Le:i=e.tailwind.cssVariables?ke:Ae,await E.writeFile(e.resolvedPaths.tailwindConfig,Dt(i)({extension:r,prefix:e.tailwind.prefix}),"utf8");let s=await z(e.tailwind.baseColor);s&&await E.writeFile(e.resolvedPaths.tailwindCss,e.tailwind.cssVariables?e.tailwind.prefix?Ce(s.cssVarsTemplate,e.tailwind.prefix):s.cssVarsTemplate:s.inlineColorsTemplate,"utf8"),await E.writeFile(`${e.resolvedPaths.utils}.${r}`,r==="ts"?je:De,"utf8"),o?.succeed();let m=M("Installing dependencies...")?.start(),f=await L(t),h=[...At,e.style==="new-york"?"@radix-ui/react-icons":"lucide-react"];await jt(f,[f==="npm"?"install":"add",...h],{cwd:t}),m?.succeed()}import{Command as Wt}from"commander";import Nt from"path";import Ot from"fs-extra";function _e(){let t=Nt.join("package.json");return Ot.readJSONSync(t)}process.on("SIGINT",()=>process.exit(0));process.on("SIGTERM",()=>process.exit(0));async function _t(){let t=await _e(),e=new Wt().name("shadcn-ui").description("add components and dependencies to your project").version(t.version||"1.0.0","-v, --version","display the version number");e.addCommand(We).addCommand(Ie).addCommand(Ee),e.parse()}_t();
//# sourceMappingURL=index.js.map

26

package.json
{
"name": "shadcn-ui",
"version": "0.0.0-beta.9a5085d",
"version": "0.0.0-beta.9fba033",
"description": "Add components to your apps.",

@@ -32,18 +32,33 @@ "publishConfig": {

"dependencies": {
"@antfu/ni": "^0.21.4",
"@babel/core": "^7.22.1",
"@babel/parser": "^7.22.6",
"@babel/plugin-transform-typescript": "^7.22.5",
"chalk": "5.2.0",
"commander": "^10.0.0",
"cosmiconfig": "^8.1.3",
"diff": "^5.1.0",
"execa": "^7.0.0",
"fast-glob": "^3.3.2",
"fs-extra": "^11.1.0",
"https-proxy-agent": "^6.2.0",
"lodash.template": "^4.5.0",
"node-fetch": "^3.3.0",
"ora": "^6.1.2",
"prompts": "^2.4.2",
"recast": "^0.23.2",
"ts-morph": "^18.0.0",
"tsconfig-paths": "^4.2.0",
"zod": "^3.20.2"
},
"devDependencies": {
"@types/babel__core": "^7.20.1",
"@types/diff": "^5.0.3",
"@types/fs-extra": "^11.0.1",
"@types/lodash.template": "^4.5.1",
"@types/prompts": "^2.4.2",
"rimraf": "^4.1.3",
"tsup": "^6.6.3",
"type-fest": "^3.6.1",
"typescript": "^4.5.5"
"type-fest": "^3.8.0",
"typescript": "^4.9.3"
},

@@ -55,3 +70,3 @@ "scripts": {

"clean": "rimraf dist && rimraf components",
"start:dev": "cross-env COMPONENTS_BASE_URL=http://localhost:3001 node dist/index.js",
"start:dev": "cross-env COMPONENTS_REGISTRY_URL=http://localhost:3001 node dist/index.js",
"start": "node dist/index.js",

@@ -63,4 +78,5 @@ "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",

"pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
"pub:release": "pnpm build && pnpm publish --access public"
"pub:release": "pnpm build && pnpm publish --access public",
"test": "vitest run"
}
}

36

README.md
# shadcn-ui
A CLI for adding components to your project.
## Usage
Use the `init` command to initialize dependencies for a new project.
The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.js`, and CSS variables for the project.
```bash
npx shadcn-ui init
```
## add
Use the `add` command to add components to your project.
The `add` command adds a component to your project and installs all required dependencies.
```bash
npx shadcn-ui add [component]
```
### Example
```bash
npx shadcn-ui add alert-dialog
```
You can also run the command without any arguments to view a list of all available components:
```bash
npx shadcn-ui add
```
## Documentation
Visit https://ui.shadcn.com/docs/cli to view the documentation.
## License
Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc