Tabs

Recipe CSS

This is the exact CSS your kit ships for Tabs — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Tabs === */
.tabs {
  display: flex;
  gap: var(--k-s-4);
  border-bottom: var(--k-divider);
  /* Tab strips never burst their card: denser styles / extra tabs scroll
   * horizontally instead. Scrollbar hidden — the cut-off edge is the cue. */
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: var(--k-s-8) var(--k-s-10);
  font-size: var(--k-type-body);
  color: var(--k-fg-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  /* Tabs are chrome text — pick up UI weight/case/tracking */
  font-weight: var(--k-ui-weight, 500);
  text-transform: var(--k-ui-transform, none);
  letter-spacing: var(--k-ui-tracking, 0);
}
/* Hover + disabled (B1) — an inactive tab darkens toward fg on hover (the
 * affordance shadcn gives its TabsTrigger), and a disabled tab dims + blocks
 * the pointer. :not(.tab--on) keeps the active tab from re-darkening. */
.tab:not(.tab--on):not(:disabled):hover { color: var(--k-fg); }
.tab:disabled { opacity: var(--k-disabled-opacity, 0.55); cursor: not-allowed; pointer-events: none; }
.tab--on { color: var(--k-fg); border-bottom-color: var(--k-primary); }
/* Tab with leading icon — keep icon vertically centered with label. The
 * line-height: 1 + svg display:block treatment is the same as .btn / .badge. */
.tab { display: inline-flex; align-items: center; gap: var(--k-s-6); line-height: 1; }
.tab > svg { flex-shrink: 0; display: block; }
/* Counter chip inside a tab — small pill, neutral, picks up primary when active */
.tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 var(--k-s-4);
  border-radius: 999px;
  font-size: var(--k-type-caption);
  font-weight: var(--k-weight-semibold);
  background: var(--k-surface-2);
  color: var(--k-fg-muted);
}
.tab--on .tab__badge { background: var(--k-primary-soft); color: var(--k-primary-soft-fg); }