Skip to content
page Docs
DiscordGitHub

Package Manager Tabs

The PackageManagerTabs component displays installation commands for various package managers like npm, pnpm, yarn in tab format. It provides modern glass effects and smooth animations.

Basic Usage

Section titled “Basic Usage”
npm install @pelagornis/page
pnpm add @pelagornis/page
yarn add @pelagornis/page

Different Package Usage

Section titled “Different Package Usage”
npm install my-awesome-package
pnpm add my-awesome-package
yarn add my-awesome-package

Props

Section titled “Props”
PropTypeDefaultDescription
packageNamestring"@pelagornis/page"Package name
npmCommandstringAuto-generatednpm command
pnpmCommandstringAuto-generatedpnpm command
yarnCommandstringAuto-generatedyarn command
idstringAuto-generatedUnique identifier

Usage Examples

Section titled “Usage Examples”

Basic Usage

Section titled “Basic Usage”
<PackageManagerTabs />

Different Package

Section titled “Different Package”
<PackageManagerTabs packageName="my-package" />

Custom Commands

Section titled “Custom Commands”
<PackageManagerTabs
  packageName="my-package"
  npmCommand="npm install my-package@latest"
  pnpmCommand="pnpm add my-package@latest"
  yarnCommand="yarn add my-package@latest"
/>

Features

Section titled “Features”

✨ Modern Design

Section titled “✨ Modern Design”
  • Glass Effect: Applied backdrop-filter: blur(20px)
  • Gradient Background: Beautiful gradient effects
  • Soft Shadows: Multi-layered shadows for depth
  • Hover Animation: translateY(-4px) scale(1.05) transform

🎭 Tab Interactions

Section titled “🎭 Tab Interactions”
  • Smooth Transitions: Natural fade-in effects on tab clicks
  • Icon Animation: Icon scale effects on hover
  • Active Tab Highlighting: Visual emphasis on selected tabs
  • Package-specific Colors: Unique colors for each package manager

📦 Package Manager Features

Section titled “📦 Package Manager Features”
  • npm: Red icon, 📦 emoji
  • pnpm: Orange icon, 🚀 emoji
  • yarn: Blue icon, 🧶 emoji

🌙 Dark Mode Support

Section titled “🌙 Dark Mode Support”
  • Automatic color adjustment
  • Consistent user experience
  • Perfect theme compatibility

📱 Responsive Design

Section titled “📱 Responsive Design”
  • Optimized size on mobile
  • Adaptive padding and font sizes
  • Touch-friendly interface

💫 Animation Effects

Section titled “💫 Animation Effects”
  • Tab Transitions: Smooth fade-in/out effects
  • Hover Effects: Natural transformation on mouse over
  • Icon Bounce: Icon scale effect on hover
  • Command Area: Full area animation on hover

♿ Accessibility

Section titled “♿ Accessibility”
  • Keyboard navigation support
  • Focus indicators
  • Screen reader compatibility
  • Clear color distinction

Styling

Section titled “Styling”

The PackageManagerTabs component can be customized through CSS variables:

:root {
  --page-tab-border-radius: 14px;
  --page-tab-padding: 16px 28px;
  --page-tab-gap: 16px;
}

Browser Support

Section titled “Browser Support”
  • Chrome 88+
  • Firefox 85+
  • Safari 14+
  • Edge 88+

Provides optimal performance on modern browsers.