hunvreus/basecoat

これは何？

主な機能

• 01Tailwind CSS v4でスタイルを適用した、セマンティックなHTML中心のコンポーネント。
• 02ReactやRadixに依存せず、素のJavaScriptで動作を実装。
• 03単体で使える8種類のスタイルパックと、スタイルを含まないベースバンドル。
• 04shadcn/uiのテーマに対応し、ダークモードも搭載。
• 05npm、CDN、NunjucksおよびJinjaのテンプレートから利用可能。

ユースケース

• Reactを導入せずに、サーバーサイドレンダリングのアプリへshadcn風UIを追加する。
• 洗練されたコンポーネントを使って、静的なマーケティングサイトやドキュメントサイトを構築する。
• スタイルを含まないベースに独自のスタイルファイルを重ねて、カスタムデザインを作成する。
• Django、Flaskなど、Jinjaベースのプロジェクトで一貫性のあるUIコンポーネントを使う。

クイックスタート

1. 1

   npmからパッケージをインストールします

   npm install basecoat-css
2. 2

   メインのCSSファイルでTailwindとBasecoatをインポートします

使う前に知っておきたいこと

• !スタイル設定はTailwind CSSに依存するため、プロジェクトにTailwindのセットアップが必要です。

トピック

よくある質問

basecoat とは？

Tailwind CSSで構築した、Reactなしで使えるshadcn/ui風コンポーネントの素のHTML/CSS/JavaScript実装。 Basecoatは、Tailwind CSSと素のHTML、CSS、JavaScriptを使ってshadcn/uiのデザインシステムを再現するコンポーネントライブラリです。React、Radix、その他のフレームワークランタイムに依存しないため、静的サイト、サーバーサイドレンダリングのテンプレート、JavaScriptアプリなど、あらゆるWebスタックに組み込めます。

basecoat は無料で使えますか？ライセンスは？

basecoat は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

basecoat は今もメンテナンスされていますか？

活発にメンテナンス中。basecoat の最終コミットは 2026年10月23日 です。

basecoat は何に使えますか？

Reactを導入せずに、サーバーサイドレンダリングのアプリへshadcn風UIを追加する。 洗練されたコンポーネントを使って、静的なマーケティングサイトやドキュメントサイトを構築する。 スタイルを含まないベースに独自のスタイルファイルを重ねて、カスタムデザインを作成する。 Django、Flaskなど、Jinjaベースのプロジェクトで一貫性のあるUIコンポーネントを使う。

basecoat のインストール方法は？

npmからパッケージをインストールします: npm install basecoat-css メインのCSSファイルでTailwindとBasecoatをインポートします

basecoat はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/hunvreus/basecoat