EarlyBird Help CenterTab
Tab allows for easy switching between different panels, making them ideal for use in pricing tables.
Example Usage:
jsx
<div id="pricing">
<Tab defaultActiveKey="monthly">
<div className="mt-14 flex justify-center">
<Tab.NavList className="flex items-center gap-1 p-1 rounded-[9999px] shadow-[inset_0_0_0_1px_rgba(30,30,30,0.1)]">
{[
{
label: 'Monthly',
key: 'monthly'
},
{
label: 'Yearly',
key: 'yearly'
}
].map(row => (
<Tab.Nav key={row.key}>
{(isSelected, select) => (
<button
className={`py-1 px-2.5 text-sm font-medium rounded-[9999px] ${isSelected ? 'text-[#fff] bg-[#2563eb]' : 'text-gray-700'}`}
tabIndex={0}
type="button"
role="tab"
aria-selected="true"
onClick={select}
>
{row.label}
</button>
)}
</Tab.Nav>
))}
</Tab.NavList>
</div>
<Tab.Panel>
{activeKey => (
<div role="tabpanel">
<div className="mx-auto mt-6 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<ul className="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
{pricing.products.map((row, index) => (
<li key={index}>
<div className="p-6 border border-gray-200 rounded-3xl text-left">
<h2 className="text-xl font-bold">{row.product_name}</h2>
<p className="mt-2 text-base leading-tight">{row.product_headline}</p>
<div className="mt-8">
<span className="text-4xl font-bold">
{activeKey === 'monthly' ? row.monthly_price : row.yearly_price}
</span>
<span className="pl-1 text-base font-medium opacity-80">
/{activeKey === 'monthly' ? 'month' : 'year'}
</span>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
)}
</Tab.Panel>
</Tab>
</div><div id="pricing">
<Tab defaultActiveKey="monthly">
<div className="mt-14 flex justify-center">
<Tab.NavList className="flex items-center gap-1 p-1 rounded-[9999px] shadow-[inset_0_0_0_1px_rgba(30,30,30,0.1)]">
{[
{
label: 'Monthly',
key: 'monthly'
},
{
label: 'Yearly',
key: 'yearly'
}
].map(row => (
<Tab.Nav key={row.key}>
{(isSelected, select) => (
<button
className={`py-1 px-2.5 text-sm font-medium rounded-[9999px] ${isSelected ? 'text-[#fff] bg-[#2563eb]' : 'text-gray-700'}`}
tabIndex={0}
type="button"
role="tab"
aria-selected="true"
onClick={select}
>
{row.label}
</button>
)}
</Tab.Nav>
))}
</Tab.NavList>
</div>
<Tab.Panel>
{activeKey => (
<div role="tabpanel">
<div className="mx-auto mt-6 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<ul className="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
{pricing.products.map((row, index) => (
<li key={index}>
<div className="p-6 border border-gray-200 rounded-3xl text-left">
<h2 className="text-xl font-bold">{row.product_name}</h2>
<p className="mt-2 text-base leading-tight">{row.product_headline}</p>
<div className="mt-8">
<span className="text-4xl font-bold">
{activeKey === 'monthly' ? row.monthly_price : row.yearly_price}
</span>
<span className="pl-1 text-base font-medium opacity-80">
/{activeKey === 'monthly' ? 'month' : 'year'}
</span>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
)}
</Tab.Panel>
</Tab>
</div>json
[
{
name: 'pricing',
title: 'Pricing table',
fields: [
{
name: 'products',
title: 'Products',
type: 'list',
fields: [
{
name: 'monthly_price',
title: 'Monthly price',
type: 'text'
},
{
name: 'yearly_price',
title: 'Yearly price',
type: 'text'
},
{
name: 'product_name',
title: 'Product name',
type: 'text',
primary: true,
ai: true
},
{
name: 'product_headline',
title: 'Product headline',
type: 'text',
ai: true
}
],
default: [
{
monthly_price: 0,
yearly_price: 0,
product_name: 'Starter',
product_headline: 'For new makers who want to fine-tune and test an idea.'
},
{
monthly_price: '$9',
yearly_price: '$90',
product_name: 'Superior',
product_headline:
'For creators with multiple ideas who want to efficiently test and refine them.'
},
{
monthly_price: '$19',
yearly_price: '$190',
product_name: 'Shipper',
product_headline: 'For productive shippers who want to work more efficiently.'
}
]
}
]
}
][
{
name: 'pricing',
title: 'Pricing table',
fields: [
{
name: 'products',
title: 'Products',
type: 'list',
fields: [
{
name: 'monthly_price',
title: 'Monthly price',
type: 'text'
},
{
name: 'yearly_price',
title: 'Yearly price',
type: 'text'
},
{
name: 'product_name',
title: 'Product name',
type: 'text',
primary: true,
ai: true
},
{
name: 'product_headline',
title: 'Product headline',
type: 'text',
ai: true
}
],
default: [
{
monthly_price: 0,
yearly_price: 0,
product_name: 'Starter',
product_headline: 'For new makers who want to fine-tune and test an idea.'
},
{
monthly_price: '$9',
yearly_price: '$90',
product_name: 'Superior',
product_headline:
'For creators with multiple ideas who want to efficiently test and refine them.'
},
{
monthly_price: '$19',
yearly_price: '$190',
product_name: 'Shipper',
product_headline: 'For productive shippers who want to work more efficiently.'
}
]
}
]
}
]Tab
defaultActiveKey
Type: string
Initial active key to display Tab.Panel.
Tab.NavList
Tab.NavList can switch the active key base on the key of Tab.Nav.
Tab.Nav
key
Type: string
Tab.Panel
Displays different panels based on the activeKey.