компоненти

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

Усе на цьому сайті зібрано з цих деталей. Атоми складаються в молекули, молекули в організми, а організми заповнюють шаблони сторінок. Перемкни тему вгорі й дивись, як змінюється все одразу.

Основи

tokens.*.css

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

Компоненти ніколи не беруть колір напряму. Тема задає базові токени, семантичні дають їм ролі, а токени компонентів налаштовують кожну деталь. Зміни одне значення внизу, і воно дійде до самого верху.

базовий --color-primary задає тема
семантичний --primary що це означає
компонентний --btn-primary-bg де використовується

базовий --color-base-000 задає тема
семантичний --surface-sunken що це означає
компонентний --tag-bg де використовується
Tag

global.css

Каскадні шари

Стилі лежать у трьох шарах, тож компонент завжди може перестилізувати атоми всередині себе простим класом.

@layer baseскидання + утиліти
@layer uiатоми + молекули
(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

Статус суцільним кольором із читабельним текстом цього ж кольору зверху.

Випущено Збій На рев’ю Наживо

Пропси

Проп	Тип	Типово
`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 · наживо ● онлайн

Пропси

Проп	Тип	Типово
`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 — open-source кросплатформний відеочат на AT Protocol: безкоштовні дзвінки без обов’язкової реєстрації як альтернатива замкненій екосистемі FaceTime. TypeScript-монорепозиторій із 8 пакетів (~65K рядків коду), що постачає одну real-time платформу для вебу (React 19), десктопу (Tauri v2 / Rust) і мобільних пристроїв (Expo). Власноруч написаний WebRTC-сигналінг із тимчасовими TURN-обліковими даними на self-hosted 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

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>