UI/UX Design Components

Готовая React-библиотека с кнопкой Orange brand, которую можно переиспользовать в любых проектах без Tailwind и дополнительных стилей.

Установка

npm install ui-ux-design-components
# или
yarn add ui-ux-design-components

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

import { Button } from "ui-ux-design-components";

export const App = () => (
  <Button variant="cta" size="m">
    Нажми меня
  </Button>
);

Стили внедряются автоматически при первом рендере компонента, поэтому никаких extra import для CSS делать не нужно.

Доступные компоненты

• Button — брендовые кнопки и их состояния (docs/Button.md).
• Input — унифицированные поля ввода, textarea и вспомогательные элементы форм (docs/Input.md).
• Grid / GridVisibility — responsive-сетка и набор классов для управления видимостью блоков (docs/Grid.md).
• Spacer — коллекция вертикальных отступов на основе исторического spacer.scss (docs/Spacer.md).
• Tag / TagGroup — капсульные теги для фильтров и выбора размеров (docs/Tag.md).

import {
  Button,
  Input,
  Select,
  Checkbox,
  Radio,
  Switch,
  TagGroup,
  Grid,
  GridVisibility,
  Spacer,
} from "ui-ux-design-components";

export const Card = () => (
  <Grid variant="bodyM">
    <h3>Оставьте заявку</h3>
    <Input label="Имя" required placeholder="Андрей" />
    <Input label="Комментарий" as="textarea" size="l" />
    <Select
      label="Тариф"
      options={[
        { label: "Базовый", value: "basic" },
        { label: "Премиум", value: "premium" },
      ]}
    />
    <Checkbox label="Согласен с условиями" />
    <Radio name="delivery" value="fast" label="Экспресс" defaultChecked />
    <Radio name="delivery" value="standard" label="Стандарт" />
    <Switch label="Получать уведомления" />
    <TagGroup
      label="Размер"
      helperText="Можно выбрать несколько опций"
      options={["S", "M", "L", "XL"]}
      multiselect
    />
    <GridVisibility show="desktop" display="flex" style={{ gap: 16 }}>
      <Button>Назад</Button>
      <Button variant="cta">Отправить</Button>
    </GridVisibility>
    <GridVisibility show="mobile">
      <Button variant="cta" size="xl" style={{ width: "100%" }}>
        Отправить
      </Button>
    </GridVisibility>
    <Spacer size={30} />
  </Grid>
);

Свойства кнопки

| Prop | Тип | Значение по умолчанию | Описание | |-------------|------------------------------------------------------------------------------------------|-----------------------|-------------------------------------------------------------------------------------------| | variant | "outline" \| "fill" \| "cta" \| "positive" \| "negative" \| "clean" | "outline" | Визуальный стиль кнопки | | size | "s" \| "m" \| "l" \| "xl" | "m" | Размер кнопки | | inverted | boolean | false | Инвертированная цветовая схема для тёмных фонов | | disabled | boolean | false | Состояние disabled | | type | "button" \| "submit" \| "reset" | "button" | HTML-тип кнопки | | className | string | — | Дополнительные классы | | children | ReactNode | — | Контент кнопки |

Компоненты Input

• Input — текстовое поле с размерами s/m/l/xl, инверсией и helperText.
• Textarea — обёртка над Input, автоматически рендерит <textarea>.
• Select — кастомный dropdown на основе исторического .select.
• Checkbox, Radio, Switch — классические контролы (.container_checkbox, .container_radio, .styled.switch).

Все компоненты поддерживают label, helperText, description, error и автоматически генерируют aria-* атрибуты. Подробнее см. docs/Input.md.

Скрипты

• npm run build — собирает ES и CJS пакеты, которые можно публиковать в npm.

Публикация

npm login
npm run build
npm publish --access public

После npm install ui-ux-design-components компонент будет сразу же выглядеть корректно: стили и CSS-переменные поставляются вместе с пакетом.