Components

Alerts

All semantic colors. Materials: neu / glass / hybrid (one each for variety).

Badge

Breadcrumb

Buttons

Neu (solid)

Glass (lens)

Hybrid (lens)

Outline

Outline fills on hover, focus, :active, and .is-active.

Sizes

Pill

Block

Icon buttons

<button class="tg-btn tg-hybrid btn-icon" aria-label="Menu">…</button>

Button group

Cards

Close

Dropdowns

<details class="tg-dropdown tg-glass-frosted">
  <summary>Label</summary>
  <div class="dropdown-menu">…</div>
</details>

List group

• North up
• East action row
• West degraded

Navbar

Collapse with nav-collapse nav-expand-md — CSS-only, no JS.

Navs & tabs

Base

• Active
• Link
• Link
• Disabled

Tabs

• Active
• Link
• Another
• Disabled

Pills

• Active
• Link
• Link
• Disabled

Underline

• Active
• Link
• Link
• Disabled

Fill and justify

• Active
• Much longer nav link
• Link
• Disabled

• Active
• Much longer nav link
• Link
• Disabled

Vertical

• Active
• Link
• Link
• Disabled

Flex alignment

Use justify-content-* / align-items-* on .nav.

• Active
• Link
• Link

• Active
• Link
• Link

Tabs with dropdown

Dropdown trigger stays inactive until a menu item is selected (aria-current).

• Active
• Link
• Dropdown

  Action Another

Pagination

Placeholders

Shimmer via tg-shimmer / placeholder utilities.

Progress

Sidebar

Spinners