Установка через npm и yarn

Библиотека Chakra UI используется в приложениях на базе React. Перед установкой необходимо наличие установленной среды Node.js и менеджера пакетов npm или yarn. Chakra UI распространяется как набор npm-пакетов, которые подключаются к проекту через систему управления зависимостями.

Минимальные требования к проекту:

  • установленный Node.js
  • менеджер пакетов npm или yarn
  • проект на React (например, созданный через create-react-app, Vite, Next.js или аналогичный инструмент)

После создания проекта структура каталога обычно содержит:

project/
 ├─ node_modules/
 ├─ public/
 ├─ src/
 ├─ package.json
 └─ package-lock.json или yarn.lock

Файл package.json хранит список зависимостей, включая Chakra UI.

Установка Chakra UI через npm

Менеджер пакетов npm входит в стандартную поставку Node.js. Установка выполняется из корневой директории проекта.

Основная команда установки:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

После выполнения команды в проект добавляются несколько зависимостей.

Основной пакет

@chakra-ui/react — главный пакет библиотеки. Он содержит:

  • систему компонентов интерфейса
  • тему оформления
  • утилиты для стилизации
  • систему layout-компонентов

Зависимости Chakra UI

Для корректной работы Chakra UI требуются дополнительные библиотеки:

@emotion/react Библиотека CSS-in-JS, обеспечивающая динамическое создание стилей.

@emotion/styled Инструмент для создания стилизованных компонентов.

framer-motion Библиотека анимаций, используемая Chakra UI для реализации анимированных переходов компонентов.

После установки список зависимостей в package.json будет выглядеть примерно так:

{
  "dependencies": {
    "@chakra-ui/react": "^2.x.x",
    "@emotion/react": "^11.x.x",
    "@emotion/styled": "^11.x.x",
    "framer-motion": "^10.x.x"
  }
}

npm автоматически создаёт каталог node_modules, в который устанавливаются все необходимые пакеты.

Установка Chakra UI через Yarn

Yarn — альтернативный менеджер пакетов для Node.js, отличающийся более быстрым разрешением зависимостей и детерминированными установками.

Если Yarn ещё не установлен, его можно добавить глобально:

npm install -g yarn

Установка Chakra UI через Yarn выполняется командой:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

После установки:

  • зависимости записываются в package.json
  • создаётся файл yarn.lock, фиксирующий точные версии пакетов
  • пакеты устанавливаются в node_modules

Пример фрагмента package.json после установки через Yarn:

{
  "dependencies": {
    "@chakra-ui/react": "^2.x.x",
    "@emotion/react": "^11.x.x",
    "@emotion/styled": "^11.x.x",
    "framer-motion": "^10.x.x"
  }
}

Проверка успешной установки

Проверка установки выполняется несколькими способами.

Проверка через package.json

В файле package.json должны присутствовать зависимости:

@chakra-ui/react
@emotion/react
@emotion/styled
framer-motion

Проверка через node_modules

В каталоге node_modules должны появиться директории:

node_modules/@chakra-ui
node_modules/@emotion
node_modules/framer-motion

Проверка через CLI

npm:

npm list @chakra-ui/react

yarn:

yarn list @chakra-ui/react

Команды выводят установленную версию пакета.

Подключение Chakra UI к приложению

После установки библиотеку необходимо подключить к React-приложению. Chakra UI использует специальный провайдер — ChakraProvider, который обеспечивает работу темы и контекста компонентов.

Импорт выполняется из основного пакета:

import { ChakraProvider } from "@chakra-ui/react"

Провайдер добавляется на верхний уровень приложения.

Пример для index.js или main.jsx:

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { ChakraProvider } from "@chakra-ui/react"

const root = ReactDOM.createRoot(document.getElementById("root"))

root.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>
)

ChakraProvider выполняет несколько функций:

  • подключает тему оформления
  • активирует систему стилизации
  • обеспечивает доступ компонентов к глобальному контексту
  • управляет CSS-reset

Подключение CSS Reset

Chakra UI включает встроенный механизм нормализации стилей браузера. Он активируется автоматически при использовании ChakraProvider.

Встроенный CSS Reset:

  • устраняет различия между браузерами
  • нормализует базовые HTML-элементы
  • задаёт единые правила для типографики

Дополнительной настройки обычно не требуется.

Структура импортов компонентов

После установки компоненты Chakra UI импортируются напрямую из основного пакета.

Пример:

import { Button } from "@chakra-ui/react"

Использование компонента:

function App() {
  return <Button colorScheme="blue">Click</Button>
}

Chakra UI предоставляет десятки компонентов интерфейса:

  • Button
  • Box
  • Flex
  • Grid
  • Stack
  • Input
  • Modal
  • Drawer
  • Tooltip
  • Avatar

Все они становятся доступными сразу после установки библиотеки.

Установка отдельных пакетов Chakra UI

В экосистеме Chakra UI существуют дополнительные пакеты. Их можно устанавливать отдельно при необходимости.

Иконки

Пакет иконок:

npm install @chakra-ui/icons

или

yarn add @chakra-ui/icons

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

import { SearchIcon } from "@chakra-ui/icons"

CLI-инструменты

Для генерации шаблонов компонентов может использоваться CLI Chakra UI.

Установка:

npm install @chakra-ui/cli

или

yarn add @chakra-ui/cli

CLI упрощает работу с:

  • темами
  • кастомными компонентами
  • конфигурациями

Использование с различными сборщиками

Chakra UI совместима с большинством современных инструментов сборки.

Create React App

Установка полностью аналогична стандартной:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Vite

Vite поддерживает Chakra UI без дополнительной конфигурации.

Установка:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Next.js

В проектах Next.js установка выполняется той же командой. Chakra UI корректно работает как с клиентским, так и серверным рендерингом.

Обновление Chakra UI

Для обновления до последней версии используются стандартные команды менеджеров пакетов.

npm:

npm update @chakra-ui/react

или

npm install @chakra-ui/react@latest

yarn:

yarn upgrade @chakra-ui/react

Обновление может затронуть и связанные зависимости:

  • Emotion
  • Framer Motion

Поэтому иногда выполняют обновление всех пакетов одновременно.

Удаление Chakra UI

Удаление выполняется через менеджер пакетов.

npm:

npm uninstall @chakra-ui/react @emotion/react @emotion/styled framer-motion

yarn:

yarn remove @chakra-ui/react @emotion/react @emotion/styled framer-motion

После удаления зависимости исчезают из package.json, а пакеты удаляются из node_modules.

Типичные проблемы установки

Конфликт версий React

Chakra UI требует современную версию React (обычно 18+). При использовании устаревших версий возможны ошибки зависимостей.

Проверка версии React:

npm list react

Ошибки peerDependencies

Иногда npm сообщает о несоответствии peer-зависимостей. В таких случаях рекомендуется:

  • обновить React
  • удалить node_modules
  • выполнить повторную установку
rm -rf node_modules
npm install

Ошибки кэша npm

Иногда установка нарушается из-за повреждённого кэша.

Очистка:

npm cache clean --force

После очистки выполняется повторная установка зависимостей.

Проверка работы компонентов

После установки и подключения ChakraProvider можно создать простой интерфейсный элемент для проверки работы библиотеки.

import { Button } from "@chakra-ui/react"

function App() {
  return (
    <Button colorScheme="teal">
      Chakra UI работает
    </Button>
  )
}

export default App

При запуске приложения компонент отобразится со встроенными стилями Chakra UI, что подтверждает успешную установку библиотеки и корректную работу зависимостей.

Оглавление