Начало работы

CapsuleUI — это коллекция современных веб-компонентов, которые вы можете добавить в свой проект, как shadcn/ui, но для веб-компонентов. Вместо установки пакета вы копируете и вставляете код в свой проект.

Установка

Чтобы начать работу с CapsuleUI, инициализируйте его в своем проекте:

npx @zizigy/capsule init

Эта команда создает папку @capsule в вашем проекте с глобальными стилями и утилитами.

Пользовательская директория

Вы можете указать пользовательскую директорию, где будет создана папка @capsule:

npx @zizigy/capsule init -d src

Это создаст папку @capsule в директории src.

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

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

npx @zizigy/capsule add <имя-компонента>

Например, чтобы добавить компонент Button:

npx @zizigy/capsule add Button

Префикс пользовательского элемента

По умолчанию компоненты используют префикс capsule (например, capsule-button). Вы можете настроить это с помощью опции --prefix:

npx @zizigy/capsule add Button --prefix ui

Это создаст компоненты с префиксом ui (например, ui-button).

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

Полный список всех доступных команд CLI, опций и примеров смотрите в документации Команды CLI.

Как это работает

Когда вы запускаете npx @zizigy/capsule add <компонент>, CLI:

1. Копирует файлы компонента из директории шаблонов
2. Импортирует CSS файлы в ваши глобальные стили
3. Импортирует JavaScript файлы в индекс компонентов
4. Обновляет настройки VS Code при необходимости

Все компоненты добавляются в директорию @capsule/components вашего проекта и полностью настраиваемы.

Подключение стилей и скриптов

Если вы используете CapsuleUI на обычной HTML-странице, подключите файлы глобальных стилей и основной JS прямо в ваш index.html:

<link
  rel="stylesheet"
  href="@capsule/global.css"
/>
<script
  type="module"
  src="@capsule/index.js"
></script>

Если вы используете сборщик (Vite, Webpack и т.п.) или фреймворк (React, Vue и др.), импортируйте файлы в корневом JS/TS модуле:

import '@capsule/global.css';
import '@capsule/index.js';

Следующие шаги

• Просмотрите раздел Компоненты, чтобы увидеть все доступные компоненты
• Посмотрите Примеры, чтобы увидеть компоненты в действии
• Прочитайте о Темизации, чтобы настроить стили компонентов