svelte-tabs

A tabs component for Svelte applications, providing a simple way to organize content into tabbed interfaces.

Key Features:

• Composable structure with Tabs, Tab, TabList, and TabPanel components
• Basic default styling that can be overridden
• Supports initial tab selection via selectedTabIndex prop

Styling Control:

• Allows style overrides through global CSS with specific selectors
• Provides class names for all components:
  • .svelte-tabs (container)
  • .svelte-tabs__tab (individual tabs)
  • .svelte-tabs__selected (active tab)
  • .svelte-tabs__tab-panel (content panels)

Current Limitations:

• Does not support nested tab panels

Example Usage:

<Tabs>
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
  </TabList>
  
  <TabPanel>Content 1</TabPanel>
  <TabPanel>Content 2</TabPanel>
</Tabs>

Originally derived from Rich Harris' Svelte REPL example fa-solid fa-up-right-from-square.