PUTabs Component
A highly customi zable tab component with smooth animations and Tailwind CSS integration.
Installation
Add the Paper-UI module to your Nuxt configuration:
export default defineNuxtConfig({
modules: ['@paper-ui/nuxt']
})
Basic Usage
Minimal setup with default styling:
General product information
Key product features
Subscription plans
<template>
<PUTabs :tabs="tabs" />
</template>
<script setup lang="ts">
const tabs = [
{ label: 'Overview', content: 'General product information', icon: 'info' },
{ label: 'Features', content: 'Key product features', icon: 'list' },
{ label: 'Pricing', content: 'Subscription plans', icon: 'tag' }
]
</script>
Custom Headers
Fully customizable tab headers with slot support:
Analytics and metrics
Account configuration
<template>
<PUTabs :tabs="tabs">
<template #tab="{ tab, isActive }">
<div class="flex items-center gap-2 p-2 transition-all"
:class="{ 'text-purple-600 scale-105': isActive, 'text-gray-400 hover:text-gray-600': !isActive }">
<PUIcon :name="tab.icon" class="w-6 h-6" />
<span class="font-medium">{{ tab.label }}</span>
</div>
</template>
</PUTabs>
</template>
Custom Content
Advanced content customization with rich formatting:
User profile information
Alert settings
<template>
<PUTabs :tabs="tabs">
<template #content="{ tab }">
<div class="p-6 bg-gradient-to-b from-white to-gray-50 rounded-xl shadow-lg">
<h3 class="text-xl font-bold mb-4">{{ tab.label }}</h3>
<div class="prose max-w-none">
{{ tab.content }}
</div>
</div>
</template>
</PUTabs>
</template>
Component API
Technical reference for the PUTabs component
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | Array<{ label: string content: string icon?: string }> | [] | Array of tab objects |
Slots
| Slot | Props | Description |
|---|---|---|
| tab | { tab: TabObject, isActive: boolean } | Custom tab header template |
| content | { tab: TabObject } | Custom tab content template |
Advanced Customization
Complete control over component styling and behavior
System metrics and analytics
Access controls and permissions
<template>
<PUTabs :tabs="tabs">
<template #tab="{ tab, isActive }">
<div class="flex items-center gap-2 p-2 rounded-lg transition-all"
:class="{ 'bg-blue-50 text-blue-700': isActive, 'text-gray-500 hover:bg-gray-50': !isActive }">
<PUIcon :name="tab.icon" class="w-5 h-5" />
<span class="text-sm font-medium">{{ tab.label }}</span>
</div>
</template>
<template #content="{ tab }">
<div class="p-6 bg-white rounded-lg shadow animate-fade-in">
<h3 class="text-xl font-bold mb-4">{{ tab.label }}</h3>
<div class="prose">
{{ tab.content }}
</div>
</div>
</template>
</PUTabs>
</template>
Best Practices
Recommended usage patterns for optimal results
- Use consistent tab labels (2-3 words max)
- Keep content sections focused and concise
- Utilize icons for better visual hierarchy
- Test responsive behavior across devices
- Maintain accessible contrast ratios
Contributing
We welcome contributions! Please follow our contribution guidelines
Happy building with Paper-UI! 🎉