Tria UI

Tria UI — UI‑кит и набор паттернов для разработки интерфейсов с единым дизайном под:

Web
VK Mini Apps
Telegram Mini Apps

Цель: единый API компонентов и единый подход к токенам/темам (theme/platform/skin), чтобы ваш интерфейс выглядел нативно (в том числе Cupertino‑ощущение на iOS).

Быстрый старт

Установите пакет:

pnpm add @tria/ui
# или npm i @tria/ui / yarn add @tria/ui

Подключите стили (рекомендуется):

import "@tria/ui/styles";

Оберните приложение провайдером:

import React from "react";
import { UIProvider } from "@tria/ui";

export function App() {
  return (
    <UIProvider config={{ theme: "dark", platform: "web", skin: "ios" }}>
      {/* ... */}
    </UIProvider>
  );
}

Два способа подключения стилей

Вариант A: отдельный импорт CSS (рекомендуется)

import "@tria/ui/styles";
import { UIProvider, Button } from "@tria/ui";

Вариант B: auto‑entry

Если вы хотите одним импортом подтянуть и JS и CSS:

import "@tria/ui/auto";
import { UIProvider, Button } from "@tria/ui";

Не используйте @tria/ui/styles вместе с @tria/ui/auto, чтобы не получить двойную загрузку CSS.

Ключевые понятия

theme: light | dark
platform: web | vk | tg
skin: web | ios | android

Комбинации параметров управляют пресетами (presets.css) и компонентными токенами (--btn-*, --input-*, --cell-*, --tabbar-*, …).

Контакты и вклад в проект

См. раздел Contributing.

2.0 KiB Raw Blame History Unescape Escape