Repolode
Предложить
hunvreus

hunvreus/basecoat

Реализация компонентов в стиле shadcn/ui на обычных HTML, CSS и JavaScript с Tailwind CSS — без React.

Открыть на GitHubСайт
Звёзды
4,424
Форки
147
Открытые issues
6
Последний коммит
14 дней назад

Что это?

Basecoat — библиотека компонентов, которая воспроизводит дизайн-систему shadcn/ui с помощью Tailwind CSS, обычных HTML, CSS и JavaScript. Она не зависит от React, Radix и среды выполнения какого-либо фреймворка, поэтому компоненты можно использовать в любом веб-стеке: на статическом сайте, в шаблоне с серверным рендерингом или в JavaScript-приложении.

Библиотека построена вокруг HTML: компоненты представляют собой семантическую разметку со стилями Tailwind, а нужное поведение обеспечивает небольшой объём обычного JavaScript. В комплект входят несколько автономных наборов стилей (Vega, Nova, Maia, Lyra, Mira, Luma, Sera и Rhea); библиотека также совместима с темами shadcn/ui. Поддерживается тёмный режим.

Basecoat можно подключить через npm, CDN или шаблоны проектов, в том числе Nunjucks и Jinja. В JavaScript доступны функции init, initAll и refresh для повторной инициализации компонентов после того, как фреймворки или библиотеки навигации восстановят DOM из кэша.

Ключевые возможности

  • 01Компоненты с семантической HTML-разметкой, стилизованные с помощью Tailwind CSS v4.
  • 02Поведение на обычном JavaScript, без зависимостей от React и Radix.
  • 03Восемь автономных наборов стилей и базовая сборка без стилей.
  • 04Совместимость с темами shadcn/ui и поддержка тёмного режима.
  • 05Доступна через npm, CDN или шаблоны Nunjucks и Jinja.

Сценарии использования

  • Добавление UI в стиле shadcn в приложение с серверным рендерингом без перехода на React.
  • Создание аккуратного статического сайта для маркетинга или документации с готовыми компонентами.
  • Создание собственного дизайна на основе базовой сборки без стилей и своего файла стилей.
  • Использование согласованных UI-компонентов в проектах на Django, Flask и других проектах на базе Jinja.

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

  1. 1

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

    npm install basecoat-css
  2. 2

    Импортируйте Tailwind и Basecoat в основной CSS-файл

Что важно знать

  • Стилизация зависит от Tailwind CSS, поэтому в проекте необходимо настроить Tailwind.

Темы

#tailwind#component-library#css#vanilla-javascript#html#design-system#dark-mode#shadcn-ui#alpine#components

Частые вопросы

Что такое basecoat?
Реализация компонентов в стиле shadcn/ui на обычных HTML, CSS и JavaScript с Tailwind CSS — без React. Basecoat — библиотека компонентов, которая воспроизводит дизайн-систему shadcn/ui с помощью Tailwind CSS, обычных HTML, CSS и JavaScript. Она не зависит от React, Radix и среды выполнения какого-либо фреймворка, поэтому компоненты можно использовать в любом веб-стеке: на статическом сайте, в шаблоне с серверным рендерингом или в JavaScript-приложении.
basecoat можно использовать бесплатно? Какая у него лицензия?
basecoat распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
basecoat всё ещё поддерживается?
Активно поддерживается. Последний коммит в basecoat — 23 окт. 2026 г..
Для чего можно использовать basecoat?
Добавление UI в стиле shadcn в приложение с серверным рендерингом без перехода на React. Создание аккуратного статического сайта для маркетинга или документации с готовыми компонентами. Создание собственного дизайна на основе базовой сборки без стилей и своего файла стилей. Использование согласованных UI-компонентов в проектах на Django, Flask и других проектах на базе Jinja.
Как установить basecoat?
Установите пакет через npm: npm install basecoat-css Импортируйте Tailwind и Basecoat в основной CSS-файл
Где скачать basecoat?
Исходный код и инструкции по установке — на GitHub: https://github.com/hunvreus/basecoat

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты