← DOCS
fantasy

SpellbookTabs

Spellbook inspired tab navigation with book cover and pages.

npx chaos add spellbook-tabs

PREVIEW

📖 FIRE📘 ICE

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { SpellbookTabs } from '@oalacea/chaosui/navigation/spellbook-tabs';

const schools = [
  { id: 'fire', name: 'Fire', icon: '🔥' },
  { id: 'ice', name: 'Ice', icon: '❄️' },
  { id: 'nature', name: 'Nature', icon: '🌿' },
];

<SpellbookTabs spellSchools={schools} activeTab="fire" onChange={setTab} />

PROPS

PropTypeDefault
spellSchoolsArray of spell schools {id, name, icon?}
SpellSchool[]-
activeTabCurrently active tab ID
string-
onChangeCallback when tab changes
(schoolId: string) => void-