🚀  Astro — Tabs bar + panels

!Downloads

A tabs bar + panels component which works entirely without JS.
Supports height equalization and automatic vertical scroll bar for tabs bar.

> Note: It uses the :has() CSS selector under the hood.

---

https://user-images.githubusercontent.com/603498/195471643-f5dac29e-f10c-4038-979b-53fbc977190e.mp4

---

📦  Installation

``sh
pnpm i astro-tabs
`

🛠  Usage

WITHOUT "tallest" equalization

`astro
---
import { Tabs } from 'astro-tabs';
// ...
---


Tab 1
Tab 2
Tab 3

Panel 1

WITH "tallest" panel equalization, use panel--tallest

`astro

Tab 1
Tab 2
Tab 3

Panel 1

`scss
.tab {
color: white;
padding: 1rem;
background-color: teal;
border: 1px solid cyan;

&:hover {
color: black;
background-color: cyan;
}
}

.tab-selector:checked ~ .tab {
color: black;
background: turquoise;
}

.panel {
padding: 1rem;
background-color: lightcyan;
border: 3px solid darkcyan;
}
`

Or use :global(.tab),… in scoped styles.

🎉  Result

`html