Это не библиотека компонентов. Это способ собрать свою.

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.badge-default     { background: var(--primary); }
.badge-secondary   { background: var(--secondary); }
.badge-destructive { background: var(--destructive); }
.badge-outline     { border-color: var(--border); }

.switch {
  width: 40px; height: 22px; border-radius: 999px;
  background: var(--input); transition: background 0.18s;
}
.switch::after {          /* бегунок */
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  background: var(--background); transition: transform 0.18s;
}
.switch[aria-checked="true"]        { background: var(--primary); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }

.checkbox { width: 17px; height: 17px; border-radius: 4px;
  border: 1px solid var(--input); color: transparent; }
.checkbox[aria-checked="true"] {
  background: var(--primary); color: var(--primary-foreground); }

.skeleton { background: var(--muted);
  animation: sk-pulse 1.6s ease-in-out infinite; }

.card {
  max-width: 350px;
  border: 1px solid var(--border);
  border-radius: var(--radius);         /* фирменные 0.5rem */
  background: var(--card);
  box-shadow: 0 1px 2px rgba(9,9,11,0.05);
}
.label { font-size: 13.5px; font-weight: 500; }
.input {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
}
.input:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--ring) 25%, transparent);
}

.tabs-list {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: var(--radius);
  background: var(--muted);   /* «канавка» под триггеры */
}
.tabs-list [role="tab"] {
  padding: 6px 12px; border: none;
  border-radius: calc(var(--radius) - 3px);
  color: var(--muted-foreground);
}
.tabs-list [role="tab"][aria-selected="true"] {
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 1px 2px rgba(9,9,11,0.05);
}
/* переключение — 12 строк ванильного JS внизу страницы */

dialog.dlg {
  width: min(430px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card); padding: 24px;
  box-shadow: 0 4px 12px rgba(9,9,11,0.08);
}
dialog.dlg::backdrop {
  background: rgba(9, 9, 11, 0.6);  /* фирменный оверлей */
}
/* открытие — нативный showModal(), Escape работает сам */

.textarea {
  display: block; width: 100%; min-height: 76px; padding: 8px 12px;
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
  font-size: 14px; line-height: 1.5; resize: vertical;
}
.textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.textarea[disabled] { opacity: .5; cursor: not-allowed; }

.select {
  appearance: none; height: 36px; padding: 0 34px 0 12px;
  background: var(--background); border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px); font-size: 14px;
}
/* шеврон без картинки: две границы, повёрнутые на 45° */
.select-wrap::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: rotate(45deg);
}
/* нативный select, а не своя выпадашка: клавиатура, прокрутка и
   мобильный колёсный выбор работают сами */

.radio {
  appearance: none; width: 16px; height: 16px;
  border: 1px solid var(--input); border-radius: 50%;
  display: inline-grid; place-content: center;
}
.radio::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  transform: scale(0); background: var(--primary);
}
.radio:checked { border-color: var(--primary); }
.radio:checked::before { transform: scale(1); }
/* fieldset + legend, а не div: группа радио обязана иметь имя */

.slider { appearance: none; background: transparent; }
.slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--secondary);
}
.slider::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; margin-top: -5px;
  border-radius: 50%; background: var(--background);
  border: 2px solid var(--primary);
}
/* -moz-* дубли обязательны: у Firefox свои имена псевдоэлементов,
   и один общий селектор для обоих движков невалиден целиком */

.otp { display: flex; gap: 6px; }
.otp input {
  width: 40px; height: 44px; text-align: center;
  font-size: 17px; font-weight: 500;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
}
/* inputmode="numeric" — цифровая клавиатура на мобильном;
   aria-label на КАЖДОЙ ячейке, иначе шесть безымянных полей */

.bc { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.bc a { color: var(--muted-foreground); text-decoration: none; }
.bc [aria-current="page"] { color: var(--foreground); font-weight: 500; }

<!-- aria-current, а не только цвет: иначе скринридер не назовёт,
     где мы находимся -->
<nav class="bc" aria-label="Хлебные крошки">…</nav>

.pg button {
  min-width: 34px; height: 34px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
}
.pg button:hover { background: var(--accent); }
.pg button[aria-current="page"] {
  border-color: var(--input); background: var(--background); font-weight: 500;
}
.pg button[disabled] { opacity: .45; pointer-events: none; }
/* «…» помечен aria-hidden: это украшение, читать его вслух нечего */

.sheet {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 92vw);
  border-left: 1px solid var(--border);
  animation: sheet-in .18s ease-out;
}
@media (prefers-reduced-motion: reduce) { .sheet { animation: none } }

<!-- нативный dialog: ловушка фокуса, Escape, инертный фон
     и top-layer — бесплатно, без единой строки JS -->
<dialog class="ov-dialog"><div class="sheet">…</div></dialog>

.drawer {
  position: fixed; inset: auto 0 0 0; max-height: 80vh;
  border-radius: var(--radius) var(--radius) 0 0;
}
.drawer .grip {
  width: 44px; height: 4px; border-radius: 999px;
  background: var(--border); margin: 10px auto 0;
}
/* Sheet и Drawer у shadcn различаются не кодом, а назначением:
   бок — для формы на большом экране, низ — для мобильного */

.pop { position: absolute; display: none; box-shadow: var(--shadow-md); }
.pop-wrap.open .pop,
.pop-wrap:focus-within .pop { display: block; }
/* :focus-within обязателен: поповер, доступный только мышью,
   для клавиатуры не существует */

.tip { opacity: 0; pointer-events: none; transition: opacity .12s; }
.tip-wrap:hover .tip,
.tip-wrap:focus-within .tip { opacity: 1; }

<!-- role="tooltip" + aria-describedby на кнопке:
     без связи подсказка для скринридера просто чужой текст -->

.hc { position: absolute; display: none; gap: 12px; }
.hc-wrap:hover .hc,
.hc-wrap:focus-within .hc { display: flex; }
/* отличие от Tooltip: карточка несёт СОДЕРЖАНИЕ (аватар, факты),
   поэтому она не role="tooltip" и не описывает кнопку */

<!-- отличие от Dialog: у Alert Dialog НЕТ закрытия по клику вне и
     нет крестика — только явный выбор. Поэтому оверлей не слушает
     click, а кнопка подтверждения помечена destructive. -->
<dialog class="ov-dialog">
  <div class="card">
    <h4>Удалить метку «сегодня»?</h4>
    <p>Метка снимется с 7 карточек. Необратимо.</p>
    <button class="btn btn-outline">Отмена</button>
    <button class="btn btn-destructive">Удалить</button>
  </div>
</dialog>

/* переиспользуем правила Menubar целиком — Dropdown у shadcn
   это то же меню, отличается только якорь (кнопка, не полоса) */
.mb-item.open .mb-menu,
.mb-item:focus-within .mb-menu { display: flex; }

.chart { display: flex; align-items: flex-end; gap: 10px; height: 130px; }
.chart .bar i { display: block; background: var(--primary); min-height: 2px; }
.chart .bar.muted i { background: var(--secondary); }

<div class="bar"><i style="height:82%"></i><span>Вт</span></div>

<!-- график — это картинка со смыслом: role="img" плюс aria-label
     с цифрами, иначе для скринридера здесь пусто -->
/* у shadcn Chart — обёртка над Recharts: те же токены темы,
   график наследует палитру, а не тащит свою */

.prog { height: 8px; border-radius: 999px; background: var(--secondary); overflow: hidden; }
.prog > i { display: block; height: 100%; background: var(--primary); }
.prog.danger > i { background: var(--destructive); }

<!-- проценты продублированы подписью: цвет полосы не читается
     скринридером, а красный не различает часть зрячих -->
<div class="prog" role="progressbar" aria-valuenow="92"
     aria-valuemin="0" aria-valuemax="100"><i style="width:92%"></i></div>

.ava-row .ava {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--secondary); display: grid; place-content: center;
  border: 2px solid var(--card);   /* обводка цветом карточки — стопка не слипается */
  margin-left: -8px;               /* нахлёст */
}
.ava-row .ava:first-child { margin-left: 0; }

/* у shadcn Avatar = Image + Fallback: пока картинка грузится или
   если она не пришла, показываются инициалы */

/* Сегодня и выбранное — РАЗНЫЕ состояния, и приёмы для них разные:
   рамка против заливки. Одним оттенком их не различить. */
.cal-grid button[aria-current="date"]  { border-color: var(--input); font-weight: 600; }
.cal-grid button[aria-selected="true"] { background: var(--primary); color: var(--primary-foreground); }
.cal-grid button[disabled] { opacity: .35; pointer-events: none; }
.cal-grid button { font-variant-numeric: tabular-nums; }  /* сетка не дёргается */

/* дни — настоящие <button>: Tab и Enter работают без единой строки JS.
   У shadcn Calendar — обёртка над react-day-picker */

/* тот же .pop, что у Popover — шире ровно под сетку календаря.
   Второй набор правил развёл бы два одинаковых по смыслу слоя. */
.pop.pop-cal { width: 292px; padding: 12px; }
.pop-wrap.open .pop, .pop-wrap:focus-within .pop { display: block; }

<!-- в реестре Date Picker нет: документация показывает его как
     композицию Popover + Calendar. Композиция вместо конфигурации -->

.aspect { width: 100%; aspect-ratio: 16 / 9; }

/* компонент существует ради одной вещи — резерва места до загрузки.
   Раньше это делали хаком с padding-top: 56.25%; нативное
   aspect-ratio закрыло приём, а компонент остался как имя для него */

/* раскрытие по фокусу — не украшение: без него компонента
   для клавиатуры не существует вовсе */
.cbx.open .cbx-pop,
.cbx:focus-within .cbx-pop { display: block; }

/* выбранное помечено галочкой И фоном: один только оттенок
   различает не каждый глаз */
.cbx-pop li[aria-selected="true"] { background: var(--accent); }
.cbx-pop li[aria-selected="false"] .tick { visibility: hidden; }

/* пролистывание пальцем, колесом и стрелками работает БЕЗ единой
   строки JS — это родной scroll-snap. Кнопки добавлены поверх. */
.car { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.car .slide { flex: 0 0 132px; scroll-snap-align: start; }

// кнопки листают на ширину слайда — и уважают «уменьшить движение»
track.scrollBy({ left: step * dir,
  behavior: reduceMotion ? 'auto' : 'smooth' });

<!-- ручка, которую можно только тащить мышью, для клавиатуры
     не существует. Поэтому это role="separator" c tabindex и
     aria-valuenow — стрелки двигают его так же, как мышь -->
<div class="sep" role="separator" tabindex="0"
     aria-valuenow="42" aria-valuemin="20" aria-valuemax="80"></div>

sep.addEventListener('keydown', e => {
  const d = e.key === 'ArrowLeft' ? -2 : e.key === 'ArrowRight' ? 2 : 0;
  if (d) { e.preventDefault(); set(pct + d); }
});

.sa { overflow-y: auto; scrollbar-width: thin;
      scrollbar-color: var(--border) transparent; }
.sa::-webkit-scrollbar { width: 8px; }
.sa::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

<!-- tabindex="0" + role="region": прокручиваемая область обязана
     получать фокус, иначе с клавиатуры её содержимое недостижимо -->

/* у shadcn Scroll Area — примитив с нарисованной полосой;
   здесь тот же вид достигнут родной прокруткой */

<!-- контейнер объявлен ЗАРАНЕЕ и пустым: aria-live читает изменения
     существующей области. Если создать её вместе с первым тостом,
     первое сообщение не прозвучит -->
<div class="toaster" role="status" aria-live="polite"></div>

.toaster { position: fixed; pointer-events: none; }  /* пустая стопка
           не перехватывает клики страницы */
.toaster .toast { pointer-events: auto; }

// автозакрытие ставим на паузу при наведении: тост, исчезнувший
// под курсором, невозможно ни дочитать, ни нажать

/* нажатое помечено НЕ одной заливкой: ещё вес шрифта и тень.
   Разницу в 5% серого различает не каждый глаз и не каждый экран */
.tg button[aria-pressed="true"] {
  background: var(--background); font-weight: 600; box-shadow: var(--shadow-sm);
}

// single и multiple — один компонент, разное поведение:
// в single перед нажатием гасим соседей, в multiple не трогаем
if (group.dataset.mode === 'single')
  siblings.forEach(b => b.setAttribute('aria-pressed', 'false'));

<!-- общий name делает группу взаимоисключающей средствами браузера;
     без него это просто несколько независимых Collapsible -->
<details name="acc1" open><summary>Что такое реестр</summary>…</details>
<details name="acc1"><summary>Почему не npm-пакет</summary>…</details>

/* маркер убираем и рисуем шеврон из двух границ — картинки не нужны */
.acc summary { list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc details[open] summary::after { transform: rotate(-135deg); }

/* Ctrl+F находит текст в закрытых секциях и раскрывает их —
   это даёт браузер, самодельная гармошка на div так не умеет */

<!-- Collapsible и Accordion — один механизм. Разводит их ровно
     одно: у Accordion общий name, и браузер закрывает соседей -->
<details>
  <summary>Показать ещё три</summary>
  …
</details>

/* первый элемент оставлен снаружи details: свёрнутым должен быть
   хвост, а не весь список — иначе непонятно, что сворачивается */