Svelte Tabs

Alternatives To Svelte Tabs
Select To Compare



A tabs component for Svelte


npm install --save svelte-tabs

Basic usage

  import { Tabs, Tab, TabList, TabPanel } from 'svelte-tabs';


    <h2>Panel One</h2>

    <h2>Panel Two</h2>

    <h2>Panel Three</h2>


  • selectedTabIndex (number): The index of the tab to initially select, when the Tabs component is mounted.

Overriding styling

svelte-tabs comes with a basic default style, but it can be overridden. To override the styles to use your own, you will need to use global styles that have a higher specificity than the built-in styles.

To make sure your overridden styles have the most specificity, include the parent class .svelte-tabs in your selector, and include the element type (see below). An example selector would be :global(.svelte-tabs li.svelte-tabs__selected).

Below are CSS selectors that can be used for the different components in this library:

  • Tabs: :global(.svelte-tabs)
  • Tab: :global(.svelte-tabs li.svelte-tabs__tab)
  • Selected Tab: :global(.svelte-tabs li.svelte-tabs__selected)
  • TabPanel: :global(.svelte-tabs div.svelte-tabs__tab-panel)

As a last resort, if you can't get the right specificity, you can always use !important.


  • Fork and clone the repository, then run npm install.
  • From the repository root, run npm link.
  • From the repository root, run npm run build:watch.
  • From the examples directory, run npm link svelte-tabs.
  • From the examples directory, run npm run dev.
  • Go to http://localhost:5000.
  • You now have a running development environment. Changes you make to the component will be reflected in the app.

Running tests

To do a single run of the tests, run npm test. To run the tests in watch mode, run npm run dev:watch.


Derived from the code at by Rich Harris


  • Nested tab panels are not yet supported.
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.