feat: add support for python package managers and minor ui improvements

Author: TimMikeladze

README.md

@@ -10,7 +10,7 @@ Visit the [Storybook](https://react-install-command.vercel.app/) for examples an
 
 ## Features
 
-- 🚀 Support for major package managers (npm, Yarn, pnpm, Bun, Deno).
+- 🚀 Support for major package managers (npm, Yarn, pnpm, Bun, Deno, uv, pip).
 - 🌓 Dark, light and system theme support out of the box.
 - 🔄 Interactive tab switching between package managers.
 - 📋 One-click copy to clipboard.
@@ -78,7 +78,7 @@ import { InstallCommand } from 'react-install-command';
 <InstallCommand 
   packageName="react" 
   registry="npm"
-  managers={[defaultManagers[4]]} // Only Deno manager
+  managers={[javascriptManagers[4]]} // Only Deno manager
 />
 
 // Mixed registry packages
@@ -87,6 +87,44 @@ import { InstallCommand } from 'react-install-command';
 />
 ```
 
+### Python Package Managers
+
+```tsx
+// Using Python managers (uv, pip)
+<InstallCommand 
+  packageName="requests" 
+  managers={pythonManagers}
+/>
+
+// Python dev dependency
+<InstallCommand 
+  packageName="pytest" 
+  managers={pythonManagers}
+  isDev 
+/>
+
+// Python package with version
+<InstallCommand 
+  packageName="django" 
+  managers={pythonManagers}
+  version="4.2.0" 
+/>
+
+// Python package with tag
+<InstallCommand 
+  packageName="fastapi" 
+  managers={pythonManagers}
+  tag="latest" 
+/>
+
+// Python global installation
+<InstallCommand 
+  packageName="black" 
+  managers={pythonManagers}
+  isGlobal 
+/>
+```
+
 ### Theming
 
 ```tsx
@@ -138,9 +176,24 @@ import { InstallCommand } from 'react-install-command';
 <InstallCommand
   packageName="react"
   managers={[
-    defaultManagers[2], // pnpm first
-    defaultManagers[0], // npm second
-    defaultManagers[1], // yarn third
+    javascriptManagers[2], // pnpm first
+    javascriptManagers[0], // npm second
+    javascriptManagers[1], // yarn third
+  ]}
+/>
+
+// Using Python managers
+<InstallCommand
+  packageName="requests"
+  managers={pythonManagers}
+/>
+
+// Mixed JavaScript and Python managers
+<InstallCommand
+  packageName="react"
+  managers={[
+    ...javascriptManagers.slice(0, 2), // npm, yarn
+    ...pythonManagers // uv, pip
   ]}
 />
 ```
@@ -327,7 +380,7 @@ Then use it in your component:
 | tag | string | undefined | Tag for the package |
 | registry | "npm" \| "jsr" | undefined | Package registry to use (for Deno packages) |
 | theme | "light" \| "dark" \| "system" | "system" | The color theme to use |
-| managers | Manager[] | defaultManagers | Array of package managers to display |
+| managers | Manager[] | javascriptManagers | Array of package managers to display |
 | customCommands | Record<string, string> | undefined | Custom commands to override the defaults |
 | slots | Slots | {} | Custom slot components for rendering |
 | slotClassNames | SlotClassNames | {} | Custom classNames for each slot |
@@ -363,6 +416,31 @@ interface Manager {
 }
 ```
 
+### Available Package Managers
+
+The component provides pre-configured manager arrays:
+
+- `javascriptManagers`: npm, Yarn, pnpm, Bun, Deno
+- `pythonManagers`: uv, pip
+
+You can import these arrays:
+
+```tsx
+import { javascriptManagers, pythonManagers } from 'react-install-command';
+
+// Use JavaScript managers (default)
+<InstallCommand packageName="react" managers={javascriptManagers} />
+
+// Use Python managers
+<InstallCommand packageName="requests" managers={pythonManagers} />
+
+// Mix managers
+<InstallCommand 
+  packageName="react" 
+  managers={[...javascriptManagers.slice(0, 2), ...pythonManagers]} 
+/>
+```
+
 ### Slots
 
 ```typescript

docs/readme.png

@@ -21,7 +21,7 @@ export interface Manager {
 			useShorthand?: boolean;
 			version?: string;
 			tag?: string;
-			registry?: "npm" | "jsr";
+			registry?: "npm" | "jsr" | "pypi";
 		},
 	) => string;
 }
@@ -92,7 +92,7 @@ export const defaultCopyIcon = () => (
 	/>
 );
 
-export const defaultManagers: Manager[] = [
+export const javascriptManagers: Manager[] = [
 	{
 		id: "npm",
 		name: "npm",
@@ -189,11 +189,12 @@ export const defaultManagers: Manager[] = [
 				tag,
 			} = options;
 
+			const command = useShorthand ? "i" : "install";
 			const flags = [
+				isDev && (useShorthand ? "-D" : "--save-dev"),
+				isPeer && "--save-peer",
+				isOptional && "--save-optional",
 				isGlobal && "-g",
-				isDev && "-D",
-				isPeer && "-P",
-				isOptional && "-O",
 			]
 				.filter(Boolean)
 				.join(" ");
@@ -204,7 +205,7 @@ export const defaultManagers: Manager[] = [
 					? `${pkg}@${tag}`
 					: pkg;
 
-			return `pnpm add${flags ? ` ${flags}` : ""} ${pkgWithVersion}`;
+			return `pnpm ${command}${flags ? ` ${flags}` : ""} ${pkgWithVersion}`;
 		},
 	},
 	{
@@ -219,13 +220,22 @@ export const defaultManagers: Manager[] = [
 			/>
 		),
 		getCommand: (pkg: string, options) => {
-			const { isDev, isPeer, isOptional, isGlobal, version, tag } = options;
+			const {
+				isDev,
+				isPeer,
+				isOptional,
+				isGlobal,
+				useShorthand,
+				version,
+				tag,
+			} = options;
 
+			const command = useShorthand ? "i" : "install";
 			const flags = [
-				isGlobal && "-g",
-				isDev && "-d",
+				isDev && (useShorthand ? "-d" : "--dev"),
 				isPeer && "--peer",
 				isOptional && "--optional",
+				isGlobal && "-g",
 			]
 				.filter(Boolean)
 				.join(" ");
@@ -236,7 +246,7 @@ export const defaultManagers: Manager[] = [
 					? `${pkg}@${tag}`
 					: pkg;
 
-			return `bun add${flags ? ` ${flags}` : ""} ${pkgWithVersion}`;
+			return `bun ${command}${flags ? ` ${flags}` : ""} ${pkgWithVersion}`;
 		},
 	},
 	{
@@ -279,6 +289,59 @@ export const defaultManagers: Manager[] = [
 	},
 ];
 
+export const pythonManagers: Manager[] = [
+	{
+		id: "uv",
+		name: "uv",
+		icon: () => (
+			<Icon
+				icon="catppuccin:uv"
+				width={24}
+				height={24}
+				aria-label="uv package manager"
+			/>
+		),
+		getCommand: (pkg: string, options) => {
+			const { isDev, isGlobal, version, tag } = options;
+
+			const flags = [isDev && "--dev"].filter(Boolean).join(" ");
+
+			const pkgWithVersion = version
+				? `${pkg}==${version}`
+				: tag
+					? `${pkg}@${tag}`
+					: pkg;
+
+			return `uv add${flags ? ` ${flags}` : ""} ${pkgWithVersion}`;
+		},
+	},
+	{
+		id: "pip",
+		name: "pip",
+		icon: () => (
+			<Icon
+				icon="logos:python"
+				width={24}
+				height={24}
+				aria-label="pip package manager"
+			/>
+		),
+		getCommand: (pkg: string, options) => {
+			const { isDev, isGlobal, version, tag } = options;
+
+			const flags = [].filter(Boolean).join(" ");
+
+			const pkgWithVersion = version
+				? `${pkg}==${version}`
+				: tag
+					? `${pkg}@${tag}`
+					: pkg;
+
+			return `pip install${flags ? ` ${flags}` : ""} ${pkgWithVersion}`;
+		},
+	},
+];
+
 export const defaultSlots = {
 	root: ({ children, className }: SlotProps) => (
 		<div className={cn("install-block", className)}>{children}</div>
@@ -431,11 +494,11 @@ export interface InstallCommandProps {
 	 * Package registry to use (for Deno packages)
 	 * @default undefined
 	 */
-	registry?: "npm" | "jsr";
+	registry?: "npm" | "jsr" | "pypi";
 
 	/**
 	 * Array of package managers to display
-	 * @default defaultManagers
+	 * @default javascriptManagers
 	 */
 	managers?: Manager[];
 
@@ -515,7 +578,7 @@ export const InstallCommand = ({
 	version,
 	tag,
 	registry,
-	managers = defaultManagers,
+	managers = javascriptManagers,
 	customCommands,
 	slots = {},
 	slotClassNames = {},

src/InstallCommand.test.tsx

@@ -10,4 +10,4 @@ export type {
 	SlotClassNames,
 	StorageType,
 } from "./InstallCommand";
-export { defaultManagers, cn } from "./InstallCommand";
+export { javascriptManagers, pythonManagers, cn } from "./InstallCommand";

src/InstallCommand.tsx

@@ -3,7 +3,13 @@ import "../styles.css";
 import { Icon } from "@iconify/react";
 import type { Meta, StoryObj } from "@storybook/react";
 import type { ReactNode } from "react";
-import { InstallCommand, type Manager, cn, defaultManagers } from "..";
+import {
+	InstallCommand,
+	type Manager,
+	cn,
+	javascriptManagers,
+	pythonManagers,
+} from "..";
 import { ComponentScreenshot } from "../ComponentScreenshot";
 
 // Define types for the manager options
@@ -15,7 +21,7 @@ interface ManagerOptions {
 	useShorthand?: boolean;
 	version?: string;
 	tag?: string;
-	registry?: "npm" | "jsr";
+	registry?: "npm" | "jsr" | "pypi";
 }
 
 // Define types for slot props
@@ -142,6 +148,13 @@ export const SpecificTag: Story = {
 	},
 };
 
+export const PythonInstall: Story = {
+	args: {
+		packageName,
+		managers: pythonManagers,
+	},
+};
+
 // Complex installation example
 export const ComplexInstallation: Story = {
 	args: {
@@ -164,9 +177,9 @@ export const CustomDefaultManager: Story = {
 	args: {
 		packageName: "react",
 		managers: [
-			defaultManagers[2], // pnpm
-			defaultManagers[0], // npm
-			defaultManagers[1], // yarn
+			javascriptManagers[2], // pnpm
+			javascriptManagers[0], // npm
+			javascriptManagers[1], // yarn
 		],
 	},
 	parameters: {
@@ -293,7 +306,7 @@ export const DenoNpmPackage: Story = {
 	args: {
 		packageName: "react",
 		registry: "npm",
-		managers: [defaultManagers[4]], // Only Deno manager
+		managers: [javascriptManagers[4]], // Only Deno manager
 	},
 	parameters: {
 		docs: {

src/index.ts

@@ -223,7 +223,6 @@
 }
 
 .install-block-text-command {
-	font-weight: 600;
 	color: var(--primary);
 }