‹ назад на сайт
лаборатория тем

компоненты

Библиотека компонентов

Всё на этом сайте собрано из этих деталей. Атомы складываются в молекулы, молекулы в организмы, а организмы заполняют шаблоны страниц. Переключи тему наверху и смотри, как меняется всё сразу.

Основы

tokens.*.css

Дизайн-токены

Компоненты никогда не берут цвет напрямую. Тема задаёт базовые токены, семантические дают им роли, а токены компонентов настраивают каждую деталь. Измени одно значение внизу, и оно дойдёт до самого верха.

  1. базовый --color-primary задаёт тема
  2. семантический --primary что это значит
  3. компонентный --btn-primary-bg где используется
  1. базовый --color-base-000 задаёт тема
  2. семантический --surface-sunken что это значит
  3. компонентный --tag-bg где используется
  4. Tag
global.css

Каскадные слои

Стили лежат в трёх слоях, поэтому компонент всегда может перестилизовать атомы внутри себя простым классом.

  1. @layer baseсброс + утилиты
  2. @layer uiатомы + молекулы
  3. (unlayered)компоненты + страницы, вне слоёв, поэтому всегда побеждают

Атомы

Самые маленькие детали. Каждая делает одно дело и читает только токены.

ui/Button.astro

Button

Ссылки и действия. Поверхность берётся из токенов контролов, так что одна настройка темы делает все кнопки плоскими, объёмными или круглыми.

Пропсы

ПропТипПо умолчанию
variant?default (outlined), primary (filled), portal (glowing accent, for the loft), danger (destructive) 'default' | 'primary' | 'portal' | 'danger' 'default'
size?md for page CTAs, sm for dense tool UIs, icon for a single glyph 'md' | 'sm' | 'icon' 'md'
block?fill the container's width boolean –
icon?a pixelarticons name, drawn before the label string –

Плюс все нативные атрибуты <button> / <a>.

Какие токены читает

компонентный
--fs-* --sp-* --ctl-border --ctl-radius --btn-bg --btn-fg --ctl-shadow --ctl-lift-hover --ctl-shadow-hover --btn-hover-border --btn-hover-fg --ctl-press --ctl-shadow-active --btn-primary-bg --btn-primary-fg --btn-primary-hover-bg
семантический
--font-pixel --error --accent --foreground --secondary

Использование

<Button variant="primary" icon="mail" href="#contact">email me</Button>
<Button size="sm" block data-save>save</Button>
ui/Tag.astro

Tag

Маленькие метки в утопленной ячейке: технологии на карточке или счётчик.

React 19 WebRTC Rust 25 8

Пропсы

ПропТипПо умолчанию
variant? 'label' | 'count' 'label'
hot? boolean –

Плюс все нативные атрибуты <span>.

Какие токены читает

компонентный
--sink-border --sink-radius --tag-fg --tag-bg --sink-shadow --fs-* --sp-*
семантический
--font-pixel --warning --on-warning

Использование

<Tag>WebRTC</Tag>
<Tag variant="count" hot>8</Tag>
ui/Badge.astro

Badge

Статус сплошным цветом с читаемым текстом этого же цвета поверх.

Выпущено Сбой На ревью Live

Пропсы

ПропТипПо умолчанию
tone 'success' | 'error' | 'warning' | 'info' –

Плюс все нативные атрибуты <span>.

Какие токены читает

компонентный
--fs-* --sp-* --sink-radius
семантический
--font-pixel --success --on-success --error --on-error --warning --on-warning --info --on-info

Использование

<Badge tone="success">shipped</Badge>
ui/Chip.astro

Chip

Слово в утопленной ячейке, крупнее и проще метки. У удаляемых есть ×.

TypeScript WebRTC AT Protocol atproto webrtc

Пропсы

ПропТипПо умолчанию
removable? boolean –

Плюс все нативные атрибуты <span>.

Какие токены читает

компонентный
--fs-* --sp-* --sink-border --sink-radius --sink-shadow --tag-bg
семантический
--foreground-dim --surface-sunken --font-pixel --foreground --foreground-faint

Использование

<Chip>TypeScript</Chip>
<Chip removable>atproto</Chip>
ui/Field.astro

Field

Текстовое поле со значком у края. При ошибке рамка краснеет.

Пропсы

ПропТипПо умолчанию
icon string –
type? 'text' | 'search' | 'password' | 'email' | 'url' 'text'
placeholder? string –
name? string –
inputDir? 'ltr' | 'rtl' | 'auto' –
error? boolean –

Плюс все нативные атрибуты <label>.

Какие токены читает

компонентный
--sp-* --fs-* --sink-border --sink-shadow --sink-radius
семантический
--foreground-faint --foreground --surface-sunken --primary --error

Использование

<Field icon="@" placeholder="handle.bsky.social" />
<Field icon="⚿" type="password" error />
ui/Switch.astro

Switch

Переключатель на основе настоящего чекбокса, так что клавиатура и формы просто работают.

Пропсы

ПропТипПо умолчанию
label? string –

Плюс все нативные атрибуты <input>.

Какие токены читает

компонентный
--sp-* --fs-* --ctl-radius
семантический
--foreground-dim --surface-sunken --border-strong --foreground-faint --primary --on-accent --foreground

Использование

<Switch label="Scanlines" data-fx="--fx-scanline" />
ui/Segmented.astro

Segmented

Несколько вариантов, из которых включён только один. Выбранный поднимается из ячейки.

Пропсы

ПропТипПо умолчанию
options Option[] –
label string –

Плюс все нативные атрибуты <div>.

Собран из

Badge

Какие токены читает

компонентный
--sink-border --ctl-radius --fs-* --sp-*
семантический
--surface-sunken --foreground-faint --surface --foreground --shadow-color

Использование

<Segmented label="Billing" options={[
  { label: 'Monthly' },
  { label: 'Yearly', pressed: true, badge: { text: '-20%', tone: 'warning' } },
]} />
ui/Eyebrow.astro

Eyebrow

Маленькая подпись // над заголовком раздела.

избранное

Пропсы

Своих пропсов нет.

Какие токены читает

компонентный
--fs-* --sp-*
семантический
--font-pixel --primary --foreground-faint

Использование

<Eyebrow>selected work</Eyebrow>

Молекулы

Атомы, собранные в форму: полоса окна, приподнятая поверхность.

ui/TitleBar.astro

TitleBar

Полоса вверху окна: точки, заголовок и место в дальнем конце. AIM превращает её в классический синий градиент.

protoimsg.app 2025
now_playing.mod
// atproto · live ● онлайн

Пропсы

ПропТипПо умолчанию
size?md on cards, sm on dense tool windows and dialogs 'md' | 'sm' 'md'
dots? boolean –

Плюс все нативные атрибуты <div>.

Какие токены читает

компонентный
--sp-* --titlebar-bg --fs-* --titlebar-fg --ctl-radius --titlebar-accent
семантический
--border --font-pixel --foreground-faint
от родителя
--ac

Использование

<TitleBar dots>
  protoimsg.app
  <span slot="end">2025</span>
</TitleBar>
ui/Panel.astro

Panel

Приподнятая поверхность, на которой стоят все карточки и окна. Raised для того, с чем работаешь, flat для вспомогательного, lift для ссылок.

raised
flat
lift · наведи на меня
window.txt

Panel + TitleBar

Пропсы

ПропТипПо умолчанию
as? 'div' | 'article' | 'section' | 'aside' 'div'
elevation? 'raised' | 'flat' 'raised'
lift? boolean –

Плюс все нативные атрибуты <div>.

Какие токены читает

компонентный
--card-bg --raise-border --raise-radius --raise-pad --raise-shadow --raise-shadow-static --lift-hover --raise-shadow-hover --card-border-hover

Использование

<Panel as="article" lift>
  <TitleBar dots>window.txt</TitleBar>
  …
</Panel>

Организмы

Целые узнаваемые части сайта из молекул и атомов.

ProjectCard.astro

ProjectCard

Panel с TitleBar, описанием, Tags и ссылками. Вся карточка ведёт по первой ссылке.

protoimsg.app 2025

protoIM

Основатель и ведущий инженер · 2025 — н. в.

proto Instant Messenger — опенсорсный кроссплатформенный видеочат на AT Protocol: бесплатные звонки без обязательной регистрации, альтернатива замкнутой экосистеме FaceTime. TypeScript-монорепозиторий из 8 пакетов (~65K строк), одна real-time платформа для веба (React 19), десктопа (Tauri v2 / Rust) и мобильных (Expo). Самописный сигналинг WebRTC с временными TURN-учётками на собственном coturn, LiveKit SFU для групповых звонков, свои лексиконы app.protoimsg.chat.*, индексатор Jetstream и 5 сервисов на Fly.io — включая собственный PDS и живой перевод NLLB-200 примерно на 17 языков.

React 19 WebRTC Tauri v2 Rust Expo LiveKit PDS Fly.io
→ Открыть сайт → GitHub

Пропсы

ПропТипПо умолчанию
project Project –

Собран из

Tag Panel TitleBar

Какие токены читает

компонентный
--sp-* --fs-*
семантический
--primary --font-body --font-display --font-pixel --foreground-faint --foreground-dim --foreground

Использование

{featured(m).map((project) => <ProjectCard project={project} />)}
MiniCard.astro

MiniCard

Плоский Panel для проектов поменьше.

nosky

Автор и ведущий инженер · 2026

Соцклиент для ATProto (Expo/RN), обходящий централизованный AppView: запросы идут напрямую на PDS-серверы подписок, слияние и сортировка — на клиенте, на стеке Microcosm (Slingshot, Constellation, Spacedust).

Пропсы

ПропТипПо умолчанию
project MiniProject –

Собран из

Panel

Какие токены читает

компонентный
--sp-* --fs-*
семантический
--font-display --info --font-pixel --foreground-faint --foreground-dim --warning

Использование

<MiniCard project={project} />
ArcadeCabinet.astro

ArcadeCabinet

Panel в виде игрового автомата, с играбельным или заблокированным экраном.

FAST HOPPER
0
РЕКОРД 0

HOPPER

Дизайнер и инженер · уже в игре

Вертикальный платформер — прыгай вверх по бесконечной лестнице платформ и гонись за рекордом. Работает на детерминированной симуляции, поэтому каждый забег можно проверить. Глобальные таблицы лидеров по сложности (fast / faster), а твои рекорды пишутся прямо в твой ATProto-репозиторий записями actor.rpg.stats.

TypeScript Canvas Deterministic Sim ATProto Records Leaderboards
▶ Играть

Пропсы

ПропТипПо умолчанию
game Game –

Собран из

Tag Panel

Какие токены читает

компонентный
--cabinet-from --cabinet-to --sink-shadow --screen-star --screen-bg --fs-* --screen-shadow --platform-from --platform-to --platform-edge --platform-hi --player-glow --sp-* --locked-from --locked-to
семантический
--primary --border --scanline-color-screen --font-pixel --foreground --foreground-dim --font-display --foreground-faint

Использование

<ArcadeCabinet game={game} />
AtStatusCard.astro

AtStatusCard

Мой живой статус в Bluesky, прочитанный из моего репозитория AT Protocol при загрузке страницы.

Пропсы

Своих пропсов нет.

Собран из

Panel TitleBar

Какие токены читает

компонентный
--fs-* --titlebar-accent --sp-* --sink-radius
семантический
--success --primary --surface-sunken --shadow-color-soft --font-display --foreground --info --border --font-pixel --foreground-faint

Использование

<AtStatusCard />
FeedbackForm.astro

FeedbackForm

Button, который открывает выдвижную панель: TitleBar над формой, а на телефонах лист, который можно смахнуть.

оставь записку

Пропсы

Своих пропсов нет.

Собран из

Button TitleBar

Какие токены читает

компонентный
--sp-* --fs-* --sink-border --sink-shadow --sink-radius
семантический
--foreground --surface-sunken --foreground-faint --primary --foreground-dim --success --error

Использование

<FeedbackForm />

Шаблоны

Рамки, в которые страницы наливают свой контент.

Section.astro

Section

Каждый раздел главной: Eyebrow, заголовок и всё, что внутри.

избранное

Проекты.

Эта рамка и есть Section.

Пропсы

ПропТипПо умолчанию
id? string –
eyebrow? string –
title? string –

Собран из

Eyebrow

Какие токены читает

Своих нет. Атомы приносят свои.

Использование

<Section id="work" eyebrow="selected work" title="Things I've built">
  …
</Section>