https://github.com/tabbycss/tabby
Tabby is an accessible tab library built with keyboard navigation support.
https://github.com/tabbycss/tabby
accessibility component css customization html js keyboard library styling tabby tabs
Last synced: over 1 year ago
JSON representation
Tabby is an accessible tab library built with keyboard navigation support.
- Host: GitHub
- URL: https://github.com/tabbycss/tabby
- Owner: tabbycss
- License: mit
- Created: 2024-10-02T16:13:56.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-03T17:34:40.000Z (over 1 year ago)
- Last Synced: 2025-02-28T20:40:37.962Z (over 1 year ago)
- Topics: accessibility, component, css, customization, html, js, keyboard, library, styling, tabby, tabs
- Language: CSS
- Homepage: https://codepen.io/GreenestGoat/pen/dyxGLEQ
- Size: 1.01 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://www.jsdelivr.com/package/npm/@tabbycss/tabby)
Tabby is an accessible tab library built with keyboard navigation support.
[Demo](https://codepen.io/GreenestGoat/pen/dyxGLEQ)
## Quick start
### Usage from CDN
You can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@tabbycss/tabby) to link Tabby
```html
```
### Install with NPM
```shell
npm install @tabbycss/tabby
```
### Usage in HTML
```index.html```
```html
Movies
Shows
Music
```
Check out the demo on [codepen.](https://codepen.io/GreenestGoat/pen/dyxGLEQ)
### Customization
Tabby can be easily customized by altering its default variables in the ```:root``` of your CSS.
```CSS```
```CSS
:root {
/* Tabby default variables */
--tabby-width: 100%;
--tabby-height: 48px;
--tabby-tab-width: 100%;
--tabby-tab-height: 100%;
--tabby-tab-background-color: transparent;
--tabby-tab-selected-background-color: #fee8e8;
--tabby-tab-hover-background-color: #d6d6d64d;
--tabby-tab-focus-background-color: #d6d6d64d;
--tabby-tab-active-background-color: #d6d6d64d;
--tabby-tab-color: #202124;
--tabby-tab-selected-color: #bc1818;
--tabby-tab-font-family: inherit;
--tabby-tab-font-size: 14px;
--tabby-tab-font-weight: 500;
--tabby-tab-line-height: normal;
--tabby-tab-radius: 6px 6px 0px 0px;
--tabby-tab-padding-left: 20px;
--tabby-tab-padding-right: 20px;
--tabby-tab-padding: 0px var(--tab-span-padding-left) 0px var(--tab-span-padding-right);
--tabby-tab-disabled-opacity: 0.4;
--tabby-tab-border-color: transparent;
--tabby-tab-selected-border-color: #bc1818;
--tabby-tab-border-radius: 0px;
--tabby-tab-border-width: 100%;
--tabby-tab-border-height: 2.6px;
}
```
## Copyright and license
Licensed under the MIT License, Copyright © 2024-present tabbycss.
See [LICENSE](https://github.com/tabbycss/tabby/blob/main/LICENSE) for more information.