- ☀️Light
- 🌙Dark
- 💻System
💠 Examples
Tab 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, facere.
Tab 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, facere.
Tab 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, facere.
Tab 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, facere.
Tab 5
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, facere.
💻 HTML Code
Tab 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, facere.
Tab 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, facere.
Tab 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, facere.
📏 Sizes
The base class .tab-btn already uses
the medium size (same as .tab-btn-md).
Use .tab-btn-sm or
.tab-btn-lg for smaller or larger tabs.
Each size has its own padding variables.
.tab-btn
.tab-btn-sm
.tab-btn-md
.tab-btn-lg
🛠️ How to use
Place all tab buttons inside the same container
(a single .tab element, for example).
Each button must use
data-js="tab"
and target a panel through
data-target.
Each panel needs a matching id
and the class .tab-content.
The initial visible panel should include the
.show class.
⚙️ How it works
When a tab button is clicked, the script identifies its target panel through
data-target, hides all panels,
removes .active from all buttons,
then shows the selected panel by adding
.show and marks the clicked button
as active. Only one panel is visible at a time.
⚙️ Variables CSS
| Variable | Description |
|---|---|
--tab-body-border-color |
Border color of the tab body container. |
--tab-body-border-radius |
Corner radius of the tab body container. |
--tab-body-border-style |
Border style applied to the tab body. |
--tab-body-border-width |
Thickness of the tab body border. |
--tab-body-padding |
Padding applied inside the tab content area. |
--tab-button-padding |
Default padding applied to tab buttons. |
--tab-button-padding-lg |
Padding for large-sized tab buttons. |
--tab-button-padding-md |
Padding for medium-sized tab buttons. |
--tab-button-padding-sm |
Padding for small-sized tab buttons. |
--tab-button-radius |
Corner radius applied to tab buttons. |