KiteCSS: A Modern Component Library Plugin for Tailwind CSS

KiteCSS is a comprehensive component library reimagined as a Tailwind CSS plugin. It seamlessly integrates a collection of over 60 professionally designed, responsive, and fully customizable components directly into your Tailwind workflow.

By leveraging the plugin architecture and Tailwind v4's modern engine, KiteCSS ensures that only the CSS you actually use is included in your final build, providing an optimized, "zero-bundle-size" component experience.

Features

• 60+ Components: From simple buttons and badges to complex accordions and carousels.
• Fully Responsive: Components are designed to work beautifully on all screen sizes.
• Zero Configuration: Works as a standard Tailwind plugin imported directly in your CSS file—no tailwind.config.js required.
• Automatic Tree-Shaking: Only the components you use in your markup are generated in your final stylesheet.
• Fully Customizable: All components are built with CSS variables that you can easily override using a standard @theme block.

Installation

Prerequisites

• A project using Tailwind CSS v4 or newer.

Step 1: Install the Package

Install KiteCSS from the npm registry:

bun add kitecss
Step 2: Activate the Plugin in Your CSSIn your main CSS file, @import the tailwindcss engine and your new kitecss plugin. You can also define your content sources here./* src/input.css */

@import "tailwindcss";
@import "kitecss";

@source "./src/**/*.{html,js,jsx,ts,tsx}";
Usage ExampleSimply add the component classes to your HTML elements.<!-- Alert -->
<div class="alert alert-success">
  <span>Your profile was updated successfully!</span>
</div>

<!-- Button -->
<button class="btn btn-primary">Primary Button</button>

<!-- Card -->
<div class="card card-bordered w-96">
    <div class="card-body">
        <h3 class="card-title">KiteCSS Card</h3>
        <p>A beautifully integrated card component.</p>
        <div class="card-actions justify-end">
            <button class="btn btn-primary">Action</button>
        </div>
    </div>
</div>
Theme CustomizationTo override the default colors and radius values, add a @theme block to your main CSS file./* src/input.css */

@import "tailwindcss";
@import "kitecss";

@source "./src/**/*.html";

@theme {
  /* This will override the default --color-primary */
  --color-primary: #e11d48; /* Your brand's rose color */

  /* This will override the default --radius-md */
  --radius-md: 1rem;
}