Components
Loading preview...
The PackageInstallerTabs component is a modern, Shadcn UI–based code snippet viewer designed for quick package installation commands. It provides users with tabbed navigation for popular package managers—npm, pnpm, yarn, and bun—each represented with intuitive icons from react-icons. The active tab displays the corresponding command in a styled, monospace code block, making it easy to read and copy. A copy button with instant feedback (switching from a clipboard icon to a checkmark) allows users to quickly copy the command to their clipboard, improving workflow efficiency. Fully responsive and keyboard-accessible, this component combines visual clarity, usability, and developer-friendly interactivity while strictly following Shadcn UI design principles. It’s perfect for documentation, tutorials, or any developer-facing interface where multiple installation methods need to be presented cleanly and interactively.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/package-installer-tabs"use client";
import React from "react";
import PackageInstallerTabs from "@/components/ui/package-installer-tabs";
const DemoPage = () => {
return (
<PackageInstallerTabs />
);
};
export default DemoPage;