basecoat/docs/src/introduction.md

---
templateEngineOverride: njk
layout: layouts/page.njk
title: Introduction
description: Basecoat is a set of components built with Tailwind CSS. It is designed to be used with any traditional web stack 
icon: info
toc:
  - label: Why Basecoat?
    id: why
  - label: How it works
    id: how-it-works
  - label: How can I help?
    id: how-can-i-help
---

<h2 id="why"><a href="#why">Why Basecoat?</a></h2>

<div class="prose">
  <p><b>Basecoat brings the magic of <a href="https://ui.shadcn.com/">shadcn/ui</a> to any traditional web stack: no React required.</b></p>

  <p>Tailwind won. But building UIs with utility classes alone kinda sucks. Most Tailwind libraries like Flowbite, Preline, or even Tailwind UI ask you to copy walls of unreadable classes into your HTML. It works, but it's messy and hard to maintain.</p>

  <p>shadcn/ui avoids that by wrapping everything in React components. It also gives you a killer design system, theme support, a CLI, and a growing ecosystem.</p>

  <p>But maybe you're not using React. Maybe your app is built with plain HTML. Or Flask. Or Rails. Or Laravel. Or Django. Or whatever.</p>

  <p><b>That's where Basecoat comes in.</b> It gives you modern, accessible components with the simplicity of plain HTML and Tailwind. Basecoat is:</p>

  <ul>
    <li><b>Lightweight</b>: no runtime JS, just CSS and a tiny bit of vanilla JavaScript for the more interactive components.</li>
    <li><b>Easy to use</b>: add classes like <code>btn</code> or <code>input</code> and you're done.</li>
    <li><b>Framework-agnostic</b>: works with any backend or frontend stack.</li>
    <li><b>Accessible</b>: components follow accessibility best practices.</li>
    <li><b>Dark mode ready</b>: respects your Tailwind config.</li>
    <li><b>Extendable</b>: tweak styles with Tailwind or CSS variables.</li>
    <li><b>Themable</b>: fully compatible with shadcn/ui themes.</li>
    <li><b>Readable</b>: no class soup, just clean markup.</li>
    <li><b>Free and open source</b>: MIT licensed.</li>
  </ul>
</div>

<h2 id="how-it-works"><a href="#how-it-works">How it works</a></h2>

<div class="prose">
  <p>Add a single CSS file to your Tailwind setup. Use components by dropping in simple classes like <code>btn</code>, <code>field</code>, or <code>card</code>.</p>

  <p>Some components (like modals or dropdowns) use a tiny bit of vanilla JavaScript. You can skip it if you don't need interactivity.</p>

  <p>There's also a CLI to help you scaffold components and get set up fast.</p>

  <p><a href="/installation">Check out the installation guide</a> to get started.</p>
</div>

<h2 id="how-can-i-help"><a href="#how-can-i-help">How can I help?</a></h2>

<div class="prose">
  <p>Basecoat is 100% open source and free.</p>

  <ul>
    <li><a href="https://github.com/hunvreus/basecoat">Star it on GitHub</a></li>
    <li><a href="https://github.com/hunvreus/basecoat/issues">Report bugs or request features</a></li>
    <li><a href="https://github.com/hunvreus/basecoat/pulls">Submit a pull request</a></li>
    <li><a href="https://github.com/sponsors/hunvreus">Sponsor the project</a></li>
  </ul>
</div>