svelte-tabs

KO | EN

gitlite — search

#typescript #ai-agents #deepseek-harness #dsh-plugin #open-source #ai #cli #dsh #claude-code #codex #developer-tools #react

★ 93 Open GitHub ↗

Tabs component for Svelte

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# svelte-tabs

A tabs component for Svelte

## Installation

npm install --save svelte-tabs

## Basic usage

```html
<script>
  import { Tabs, Tab, TabList, TabPanel } from 'svelte-tabs';
</script>

<Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
    <Tab>Three</Tab>
  </TabList>

<TabPanel>
    <h2>Panel One</h2>
  </TabPanel>

<TabPanel>
    <h2>Panel Two</h2>
  </TabPanel>

<TabPanel>
    <h2>Panel Three</h2>
  </TabPanel>
</Tabs>
```

## Props

- `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`.

## Development

- 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](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`.

## Credits

Derived from the code at [https://svelte.dev/repl/8e68120858e5322272dc9136c4bb79cc?version=3.7.0](https://svelte.dev/repl/8e68120858e5322272dc9136c4bb79cc?version=3.7.0) by Rich Harris

## Limitations

- Nested tab panels are not yet supported.

svelte-tabs

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README