Components Utilities Conventions Configurator Status

Build fast, ship faster.

36 components ready for rapid prototyping.

Alerts Notification components

Your move has been successfully saved.
<div class="g-alert type-inline variant-success dismissible"> <span class="g-alert-icon"> <span class="g-glyph"> <svg>...</svg> </span> </span> <div class="g-alert-content"> <span class="g-alert-message">Alert message text</span> </div> <button class="g-alert-close"> <span class="g-glyph"> <svg>...</svg> </span> </button> </div>
Type type-inline type-solid Variant variant-success variant-info variant-warning variant-danger variant-neutral Size size-s size-m size-l Modifiers dismissible

Hints Contextual hints

Settings
Edit
Delete
<div class="g-hint-wrapper"> <button class="g-hint-trigger g-button size-l variant-ghost icon-only"> <span class="g-glyph"> <svg viewBox="0 0 24 24" fill="currentColor"> <!-- Icon SVG path --> </svg> </span> </button> <div class="g-hint align-top align-center"> Settings </div> </div>
Position align-top align-bottom align-left align-right Alignment align-center align-start align-end Theme default variant-light Size default size-s size-l

Empty State Placeholder content

No Results Found

Try adjusting your search filters or add a new item to get started

<div class="g-empty-state"> <div class="g-empty-state-content"> <span class="g-glyph"><svg>...</svg></span> <div class="g-empty-state-copy"> <h3 class="g-empty-state-header">No Results Found</h3> <p class="g-empty-state-subheader">Try adjusting your search filters</p> </div> </div> <div class="g-empty-state-actions"> <button class="g-button size-m variant-primary"> <span class="g-button-text">Add Item</span> </button> </div> </div>
Size Variants default size-s size-l Style Variants bordered card

Buttons Interactive elements

<button class="g-button size-m variant-primary"> <span class="g-button-text">Play</span> </button>
Size size-s size-m size-l size-xl size-xxl Variant variant-primary variant-secondary variant-secondary-danger variant-danger variant-ghost variant-ghost-link variant-monetization variant-streaming variant-white Composition text-only icon-only text-with-icon icon-with-text State default is-loading is-disabled Width w-auto w-full wide Alignment justify-center justify-start justify-end justify-between

Dropdown Button Trigger controls

<div class="g-dropdown-field"> <label class="g-dropdown-label">Select Option</label> <button class="g-dropdown-button size-m variant-select"> <span class="g-glyph"> <svg>...</svg> </span> <span class="button-text">Select Option</span> <span class="g-glyph"> <svg>...</svg> </span> </button> </div>
Size size-s size-m size-l size-xl size-xxl Variant variant-select variant-ghost Alignment justify-center justify-start Features with-label with-icon

Feature Button Promotional controls

<button class="g-feature-button size-l"> <span class="button-icon color-icon"> <svg viewBox="0 0 90 90">...</svg> </span> <div class="button-text"> <span class="button-label">Play Online</span> <span class="button-sublabel">Play vs a person of similar skill</span> </div> </button>
Size size-m size-l

Close Button Dismissal controls

<button class="g-close-button size-m subtle"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> </svg> </button>
Size size-m size-l Variant subtle default white

Input Field Text input component

<input type="text" class="g-input size-m default" placeholder="Enter your username">
Size size-s size-m size-l size-xl State default error warning success disabled Type text email password number search

Textarea Multi-line text input

<textarea class="g-textarea" rows="3" placeholder="Share your thoughts..."></textarea>
Rows 2 3 4 5 State default error disabled

Checkbox Selection control

<label> <input type="checkbox" class="g-checkbox"> <span>Remember me</span> </label>
State unchecked checked disabled

Radio Button Single selection control

<label> <input type="radio" class="g-radio" name="plan"> <span>Basic Plan</span> </label>
State default checked disabled

Switch Toggle control

<div class="g-switch size-m variant-primary"> <input type="checkbox" class="g-switch-checkbox" id="switch-1"> <label for="switch-1" class="g-switch-label"> <span class="g-switch-button"></span> </label> </div>
Size size-s size-m size-l Variant variant-primary variant-secondary State off on disabled

Tabs Navigation components

<div class="g-tabs variant-main"> <button class="g-tab is-active"> <span class="g-tab-label">Games</span> </button> <button class="g-tab"> <span class="g-tab-label">Analysis</span> <span class="g-tab-badge">3</span> </button> <button class="g-tab"> <span class="g-tab-label">Learn</span> <span class="g-tab-dot"></span> </button> </div>
Variant variant-main variant-aside variant-secondary variant-inline Features badges dots icons

Pagination Navigation controls for multi-page content

<nav class="g-pagination" role="navigation" aria-label="Pagination"> <button class="g-button size-xs variant-secondary g-pagination-top"> <span class="g-button-text">Top</span> </button> <div class="g-pagination-nav"> <button class="g-button size-xs variant-secondary g-pagination-first" disabled> <span class="g-button-text">First</span> </button> <button class="g-button size-xs variant-secondary icon-only g-pagination-prev" disabled> <span class="g-glyph"><svg>...</svg></span> </button> <button class="g-button size-xs variant-secondary g-pagination-page" aria-selected="true"> <span class="g-button-text">1</span> </button> <!-- ...page numbers... --> <button class="g-button size-xs variant-secondary icon-only g-pagination-next"> <span class="g-glyph"><svg>...</svg></span> </button> <button class="g-button size-xs variant-secondary g-pagination-last"> <span class="g-button-text">Last</span> </button> </div> </nav>
Variant default g-pagination-compact

Aside Item Navigation menu items

<button class="g-aside-item navigational with-icon"> <span class="g-aside-item-select"> <span class="g-glyph size-16"><svg>...</svg></span> </span> <span class="g-aside-item-icon"> <span class="g-glyph"><svg>...</svg></span> </span> <span class="g-aside-item-label">Dashboard</span> <span class="g-aside-item-secondary"> <span class="g-glyph size-16"><svg>...</svg></span> <span class="g-aside-item-count">99+</span> </span> <span class="g-aside-item-chevron"> <span class="g-glyph size-16"><svg>...</svg></span> </span> </button>
Composition label-chevron icon-label-chevron label-value-chevron icon-label-value-chevron select-label select-label-value icon-label label-icon label-value icon-label-value State selected disabled danger

Avatars User representations

Chess.com team member avatar
<div class="online"> <div class="g-avatar size-40"> <img class="g-avatar-img" src="user.jpg" alt="User"> <div class="g-avatar-status"></div> </div> </div>
Size size-24 size-32 size-40 size-48 size-64 size-80 size-96 size-160 Status none online playing streaming Element div a

Membership Badge Tier and role indicators

<span class="g-membership-badge variant-diamond size-m"> <span class="g-glyph"><svg>...</svg></span> </span>
Variant variant-diamond variant-platinum variant-gold variant-staff variant-mod Size size-s size-m size-l

User Player information display

GM AnishGiri 2764 United States Birthday cake flair
<!-- Minimal example --> <div class="g-user-username"> <a href="#" class="g-user-link">AnishGiri</a> </div> <!-- Full example with all optional elements --> <div class="g-user-username"> <span class="g-membership-badge variant-diamond size-s"> <span class="g-glyph"><svg>...</svg></span> </span> <span class="g-user-title variant-gm">GM</span> <a href="#" class="g-user-link">AnishGiri</a> <span class="g-user-rating">2764</span> <span class="g-user-badge variant-verified"> <span class="g-glyph"><svg>...</svg></span> </span> <span class="g-user-flag"> <img src="/docs/gambit/images/flags/us_united-states.svg" alt="United States"> </span> <span class="g-user-flair"> <img src="/icons/svg/holiday-birthday-cake.svg" alt="Birthday flair"> </span> </div>
Membership none variant-gold variant-platinum variant-diamond variant-staff variant-mod Title none variant-gm variant-im variant-fm variant-cm variant-nm variant-wgm variant-wim variant-wfm variant-wcm variant-wnm Rating none show provisional Optional Elements verified flag flair Size size-s size-m size-l

New Badge New content indicator

NEW
<div class="g-new-badge">NEW</div>
Style text collapsed number Modifiers pulse positioned

Premium Badge Membership tier indicators

Diamond
<span class="g-premium-badge variant-diamond"> <span class="g-glyph g-premium-badge-icon"> <svg>...</svg> </span> <span class="g-premium-badge-label">Diamond</span> </span>
Variant variant-diamond variant-platinum variant-gold

Notification Badge Count indicators

3
<span class="g-notification-badge variant-alert">3</span>
Variant variant-alert variant-neutral variant-online Modifiers dot size-l positioned

Chip Small labeled elements

DRAFT
<span class="g-chip color-gray variant-translucent"> <span class="g-chip-label">DRAFT</span> </span>
Color color-gray color-aqua color-blue color-brown color-fuchsia color-gold color-green color-orange color-purple color-red color-skin color-slate Variant variant-translucent variant-opaque Features with-icon removable normal-case

Cards Content containers

<button class="g-card size-l variant-default"> <div class="g-icon size-64"> <img src="/icons/svg/book-courses.svg" alt="Lessons"> </div> <div class="g-card-content"> <span class="g-card-title">Lessons</span> <span class="g-card-subtitle">How to Play</span> </div> </button>
Size size-s size-l Variant variant-default variant-elevated variant-secondary variant-glass Composition default indicators progress bot

Progress Loading indicators

<!-- Basic progress bar --> <div class="g-progress-bar size-m color-blue"> <div class="g-progress-bar-track"> <div class="g-progress-bar-fill" style="width: 65%"></div> </div> </div> <!-- Progress bar with label --> <div class="g-progress-bar with-label"> <div class="g-progress-bar-label"> <span class="g-progress-label-text">Challenge 1/5</span> </div> <div class="g-progress-bar-track"> <div class="g-progress-bar-fill" style="width: 20%"></div> <span class="g-progress-bar-total">5</span> </div> </div> <!-- Progress bar with next step indicator --> <div class="g-progress-bar next-step"> <div class="g-progress-bar-track"> <div class="g-progress-bar-next-step" style="width: 40%"></div> <div class="g-progress-bar-fill" style="width: 20%"></div> </div> </div>
Size size-s size-m size-l size-xl Color color-default color-blue color-orange color-purple color-green Label no-label label-full label-text-only label-number-only next-step

Table Data display in tabular format

Game Players Result Analysis Moves Date
3 days
bist-du-boese 1388 Germany
macakuaya 558 Venezuela
1 0
5 Feb 18, 2024
5+0
chess_master 1850
rapid_player 1723 USA
0 1
69.4
88.7
 42 Feb 17, 2024
1+0
speedster 1456 Canada
bullet_king 1389
½ ½
91.8
89.3
 28 Feb 16, 2024
10+0
tactical_genius 2156 France
endgame_artist 2089
0 1
67 Feb 15, 2024
3+2
fischer_fan 1678
random_master 1712 Brazil
1 0
94.2
82.5
 38 Feb 14, 2024
30+0
strategic_mind 2145 India
golden_knight 2087
½ ½
72 Feb 13, 2024
3+0
crazy_player 1456 France
drop_master 1523 Canada
0 1
76.8
89.3
 45 Feb 12, 2024
1+0
speed_demon 1892
bullet_train 1834 Japan
1 0
28 Feb 11, 2024
5+3
check_specialist 1567 Spain
triple_threat 1602
½ ½
85.7
87.2
 52 Feb 10, 2024
<div class="g-table"> <table class="g-table-element"> <thead> <tr> <th>Game</th> <th>Players</th> <th>Result</th> <th class="text-center">Analysis</th> <th class="text-center">Moves</th> <th class="text-right">Date</th> </tr> </thead> <tbody> <tr> <td> <div class="g-table-game-info"> <span class="g-glyph size-24"><svg>...</svg></span> <span class="g-table-time-control">3 days</span> </div> </td> <td> <div class="g-table-users"> <div class="g-user size-s">...</div> </div> </td> <td> <div class="g-table-result"> <div class="g-table-score"> <span>1</span> <span>0</span> </div> <span class="g-glyph size-20"><svg>...</svg></span> </div> </td> </tr> </tbody> </table> </div>
Style Variants striped hover Density compact normal spacious

Accordion Expandable content sections

Diamond is our premium membership that includes unlimited puzzles, lessons, game analysis, and an ad-free experience.

Practice tactics daily, study opening principles, analyze your games, and play regularly against opponents near your skill level.

We offer bullet (1-2 minutes), blitz (3-5 minutes), rapid (10+ minutes), and daily chess with multiple days per move.

<div class="g-accordion"> <div class="g-accordion-item"> <button class="g-accordion-trigger"> <span class="g-accordion-text">What is Chess.com Diamond membership?</span> <span class="g-glyph"> <!-- @include "/source/glyphs/svg/arrow-chevron-bottom.svg" --> </span> </button> <div class="g-accordion-content"> <div class="g-accordion-inner"> <!-- Content goes here --> </div> </div> </div> <!-- Additional accordion items... --> </div>
Size size-s size-m size-l size-xl size-xxl Prefix none numbered icon Style default ghost Behavior single-open multiple-open Modifiers flush Features no-subline with-subline

Container Flexible layout component using flexbox

Daily
1273
Daily
Puzzles
2510
Puzzles
Rapid
1927
Rapid
Bullet
1809
Bullet
Blitz
1812
Blitz
Bughouse
1604
Bughouse
<div class="g-container direction-row wrap align-center justify-center p-0 g-24 w-full"> <div class="g-card"> <div class="g-card-body text-center"> <div class="g-icon size-64"> <img src="/icons/svg/time-daily.svg" alt="Daily"> </div> <div class="heading size-l weight-bold">1273</div> <div class="text size-l weight-bold">Daily</div> </div> </div> <!-- More stat cards... --> </div>
Direction direction-row direction-column Wrap nowrap wrap Align Items align-start align-center align-end align-stretch Justify Content justify-start justify-center justify-end justify-between justify-around justify-evenly Padding p-0 p-8 p-12 p-16 p-24 p-40 Gap g-0 g-2 g-4 g-8 g-12 g-16 g-24 Width w-auto w-xs w-s w-m w-l w-xl w-full

Header Page Page titles with icons

Library
<a href="#" class="g-page-header size-l"> <span class="g-icon"> <img aria-hidden="true" alt="Library" src="/icons/svg/library.svg"> </span> <h1 class="g-page-header-title">Library</h1> </a>
Size size-m size-l

Header Aside Section headers with navigation

Section Title

(42)
<div class="g-aside-header"> <div class="g-aside-header-name"> <h2 class="g-aside-header-title">Section Title</h2> <span class="g-aside-header-subtext">(42)</span> </div> <span class="g-aside-header-icon"> <svg>...</svg> </span> </div>
Padding narrow wide Underline underline-default underline-full underline-none

Header Sidebar Feature headers with actions

Puzzle Rush

Puzzle Rush

<header class="g-sidebar-header variant-secondary"> <div class="g-sidebar-header-start"> <button class="g-button size-m variant-ghost icon-only"> <span class="g-glyph"> <svg>...</svg> </span> </button> </div> <div class="g-sidebar-header-center"> <!-- For primary/secondary variants --> <span class="g-icon"> <img src="/icons/svg/puzzle-piece.svg" alt="Feature"> </span> <!-- For secondary-flat/tertiary variants --> <span class="g-glyph"> <svg>...</svg> </span> <h1 class="g-sidebar-header-title">Feature Title</h1> </div> <div class="g-sidebar-header-end"> <button class="g-button size-m variant-ghost icon-only"> <span class="g-glyph"> <svg>...</svg> </span> </button> </div> </header>
Variant variant-primary variant-secondary variant-secondary-flat variant-tertiary Modifier none transparent

Modals Dialog windows

Game Analysis

Your game has been analyzed. You played at 87% accuracy with 2 brilliant moves!

<div class="g-modal g-modal-active"> <div class="g-modal-backdrop"></div> <div class="g-modal-container"> <div class="g-modal-dialog size-m"> <div class="g-modal-header"> <h3 class="g-modal-title">Game Analysis</h3> <button class="g-modal-close">×</button> </div> <div class="g-modal-body"> <p>Your game has been analyzed. You played at 87% accuracy with 2 brilliant moves!</p> </div> <div class="g-modal-footer"> <button class="g-button size-l variant-secondary"><span class="g-button-text">Close</span></button> <button class="g-button size-l variant-primary"><span class="g-button-text">View Analysis</span></button> </div> </div> </div> </div>
State g-modal-active Sizes size-xxxs size-xxs size-xs size-s size-m size-l size-xl

Sidebar Play

<div class="g-sidebar g-sidebar-game variant-ingame"> <!-- Primary navigation - see Tabs component (variant-aside) --> <div class="g-tabs variant-aside"> <button class="g-tab is-active"> <span class="g-glyph"><svg>...</svg></span> <span class="g-tab-label">Daily</span> </button> <!-- More tabs... --> </div> <!-- Secondary navigation - see Tabs component (variant-secondary) --> <div class="g-tabs variant-secondary">...</div> <!-- Content area --> <div class="g-sidebar-content g-sidebar-scrollable"> <!-- Opening info --> <div class="g-info-bar g-info-bar-opening"> <span class="g-info-bar-text">Opening Name</span> <!-- Optional link button - see Buttons component --> </div> <!-- Move list --> <table class="g-move-list"> <tbody> <tr class="g-move-row g-move-row-light"> <td class="g-move-number">1.</td> <td class="g-move g-move-white"> <button class="g-move-button"> <!-- Optional piece icon --> <span class="g-piece-icon">♞</span>f3 </button> </td> <td class="g-move g-move-black"> <button class="g-move-button">d5</button> </td> <td class="g-move-time"> <div class="g-move-time-wrapper"> <span class="g-move-time-white">20 mins</span> <span class="g-move-time-black">7 mins</span> </div> </td> </tr> <!-- More move rows... --> </tbody> </table> </div> <!-- Action buttons --> <div class="g-sidebar-actions"> <!-- Main actions (Full Analysis, Review, etc.) - postgame only --> <div class="g-sidebar-actions-main">...</div> <!-- Move navigation controls - see Buttons component --> <div class="g-sidebar-actions-controls g-button-group">...</div> <!-- Utility actions - see Buttons component --> <div class="g-sidebar-actions-utility">...</div> </div> </div>
Variant variant-ingame variant-postgame

Glyphs Flat and Simple

<span class="g-glyph size-24 color-glyph-default"> <svg>...</svg> </span>
Size size-12 size-16 size-20 size-24 size-32 size-40 size-48 size-56 size-64 Color color-glyph-default color-glyph-boldest color-glyph-bolder color-glyph-subtle color-glyph-inverse color-glyph-success color-glyph-danger color-glyph-warning color-glyph-info color-glyph-win color-glyph-draw color-glyph-loss color-glyph-gold color-glyph-silver color-glyph-bronze

Icon Eye Candy

Cool emoji
<span class="g-icon size-128"> <img src="/icons/svg/emoji-cool.svg" alt="Cool emoji"> </span>
Size size-12 size-16 size-20 size-24 size-32 size-40 size-48 size-64 size-80 size-96 size-128

Loaders Loading animations

Code Examples

Loader sizes:

<div class="g-loader loader-small"></div> <div class="g-loader"></div> <div class="g-loader loader-large"></div>

Loading button example:

<button class="g-button-medium-primary-loading"> <div class="g-loader loader-small"></div> Loading... </button>
Class Name Description Size
g-loader Default spinner loader Medium (default)
loader-small Small spinner Small
loader-large Large spinner Large