tabwebComponents
12
Reusable UI building blocks
Elements
24
Low-level Tabweb elements
Welcome
This site is the live component showcase for tabweb.
Icons
JGX
This is a status component
This is a status component
Visits
A first ApexCharts example inside a card.
Service availability
Tracking blocks with Tabweb tooltips.
Hover over a day to see its status. Open another page and return here to compare tooltip behavior after navigation.
Colors
The Tabweb color palette with base colors, light variants, the gray scale and social brand colors, each with background and text utilities.
Color palette
Base colors
These are the base colors. Each one has bg-* and text-* utilities, and the components use the same names for their color variants.Azure
Blue
Cyan
Green
Indigo
Lime
Orange
Pink
Purple
Red
Teal
Yellow
White
Black
Light colors
Every base color also has a light shade with the -lt suffix. It works as a background for text or an icon in the base color.Azure Light
Blue Light
Cyan Light
Green Light
Indigo Light
Lime Light
Orange Light
Pink Light
Purple Light
Red Light
Teal Light
Yellow Light
White Light
Gray palette
The gray scale is used for backgrounds, borders and muted text. Tabweb ships several gray palettes and switches between them with data-bs-theme-base.Gray 50
Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Gray 900
Gray 950
Social colors
The brand colors of popular services are available too, for social buttons and icons.Facebook
Twitter
Instagram
LinkedIn
X
Google
Youtube
Vimeo
Dribbble
Github
Pinterest
VK
RSS
Flickr
Bitbucket
Tabler