Tabs

A modern and sophisticated tab component. It provides glass effects and smooth animations.

Basic Usage

📋 Overview 💡 Usage 🎨 Examples

The Tabs component is used to display content divided into multiple tabs. Each tab can have an icon and label, and provides smooth transition animations.

When you click a tab, the corresponding content appears smoothly, and provides subtle animation effects on hover.

You can check how to utilize the component through various examples and use cases.

Props

Prop	Type	Default	Description
tabs	Array<Tab>	-	Tab configuration array (required)
defaultTab	string	First tab’s id	Default selected tab

Tab Object

Property	Type	Required	Description
id	string	✅	Unique identifier for the tab
label	string	✅	Label to display on the tab
icon	string	❌	Icon to display on the tab (emoji)

Examples

Basic Tabs

---
import Tabs from "@pelagornis/page/components/Tabs.astro";
---

<Tabs tabs={[
  { id: "tab1", label: "First Tab" },
  { id: "tab2", label: "Second Tab" },
  { id: "tab3", label: "Third Tab" }
]} defaultTab="tab1">
  <div>
    Content for the first tab.
  </div>
  <div>
    Content for the second tab.
  </div>
  <div>
    Content for the third tab.
  </div>
</Tabs>

Tabs with Icons

---
import Tabs from "@pelagornis/page/components/Tabs.astro";
---

<Tabs tabs={[
  { id: "info", label: "Info", icon: "ℹ️" },
  { id: "settings", label: "Settings", icon: "⚙️" },
  { id: "help", label: "Help", icon: "❓" }
]} defaultTab="info">
  <div>
    <h3>Info Tab</h3>
    <p>Place information content here.</p>
  </div>
  <div>
    <h3>Settings Tab</h3>
    <p>Place settings content here.</p>
  </div>
  <div>
    <h3>Help Tab</h3>
    <p>Place help content here.</p>
  </div>
</Tabs>

Various Icon Examples

📚 Documentation 💻 Code 🎨 Design 🚀 Deploy

📚 Documentation

Check project documentation and guides.

💻 Code

Explore source code and examples.

🎨 Design

Refer to UI/UX design guides.

🚀 Deploy

Check deployment methods and environment setup.

Features

✨ Modern Design

• Glass effects and gradient backgrounds
• Soft shadows and hover effects
• Sophisticated typography

🎭 Smooth Animations

• Natural fade-in effects on tab transitions
• Icon scale animations on hover
• Smooth transition effects

🌙 Dark Mode Support

• Perfect compatibility with light/dark themes
• Automatic color adjustment
• Consistent user experience

📱 Responsive Design

• Horizontal scroll support on mobile
• Optimized for various screen sizes
• Touch-friendly interface

♿ Accessibility

• Keyboard navigation support
• Focus indicators
• Screen reader compatibility

Styling

The Tabs component can be customized through CSS variables:

:root {
  --page-tab-border-radius: 12px;
  --page-tab-padding: 14px 24px;
  --page-tab-gap: 12px;
}

Browser Support

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

Provides optimal performance on modern browsers.