40+ Production-Ready Tailwind CSS Components

David UI is a free and open-source collection of customizable, production-ready UI components built with Tailwind CSS.

It currently includes over 40 different component types, from basic UI elements to complex interface patterns.

GitHub Repo

Browse All Components

Features

⚡ Built with Tailwind CSS – Full utility class customization and theming support

📱 Mobile-First Design – Responsive components that work across all device sizes

♿ Accessibility Focused – Components follow best practices for inclusive design

🚀 Multiple Installation Options – CDN, NPM, and direct integration support

💻 TypeScript Support – Full type definitions for enhanced development experience

🔧 Programmatic API – Advanced component control with JavaScript methods

🎯 Framework Agnostic – Works with React, Vue, plain HTML, and other frameworks

Use Cases

Rapid Prototyping: Quickly assemble interfaces for new projects or proof-of-concepts using the ready-made components. This allows for faster iteration and feedback cycles.
Building Admin Dashboards: Utilize components like tables, modals, navigation, and cards to construct functional and organized admin panels for web applications.
Developing E-commerce Frontends: Employ elements such as product cards, image galleries, buttons, and input fields to create user-friendly online store interfaces.
Creating Marketing Websites: Use typography, hero sections, and call-to-action buttons to design attractive landing pages and company websites.
Updating Existing Tailwind CSS Projects: Integrate David UI components into ongoing Tailwind CSS projects to add new features or refresh the UI without starting from scratch.

Installation

Using with CDN

<script src="https://cdn.jsdelivr.net/gh/creativetimofficial/david-ai/packages/dist/david-ai.min.js" defer
></script>

This method allows for global initialization of components.

DavidAI.initAlert();

NPM

npm i david-ai

After installation, you can import and initialize components within your project.

import { initAlert } from "david-ai";
// Initialize alerts
initAlert();

Global Object Access

import * as DavidAI from "david-ai";
// Initialize specific components
DavidAI.initAlert();

TypeScript Implementation

import { Accordion } from "david-ai";
import type { AccordionConfig, IAccordion } from "david-ai";
document.addEventListener("DOMContentLoaded", () => {
  const container = document.getElementById("accordion-container");
  if (container) {
    const config: AccordionConfig = {
      exclusive: true,
      allOpen: false,
    };
    const accordion: IAccordion = new Accordion(container, config);
    // Programmatic control
    accordion.showAll();
    accordion.hideAll();
    // Cleanup on unmount
    window.addEventListener("unload", () => {
      accordion.cleanup();
    });
  }
});

Available UI Components

AI Buttons
AI Inputs
AI Textarea
Button Group
Icon Button
Rating Bar
Switch
Checkbox
Input
Radio
Textarea
Accordion
Alert
Avatar
Badge
Card
Chip
Collapse
Dropdown
Image
List
Modal
Popover
Progress Bar
Spinner
Table
Timeline
Tooltip
Typography
Video
Breadcrumb
Pagination
Stepper
Tabs
Footer
Gallery
Navbar
Sidebar

FAQs

Q: Can I use David UI with frameworks other than React?
A: Yes, David UI is framework-agnostic and works with React, Vue, Angular, or plain HTML projects.

Q: Do I need to install Tailwind CSS separately?
A: Yes, David UI requires Tailwind CSS as a dependency since all components are built using Tailwind utility classes.

Q: Is David UI free for commercial projects?
A: Yes, David UI is completely free and open-source, making it suitable for both personal and commercial projects.

Q: How do I customize component styles?
A: You can customize components by modifying the Tailwind CSS classes directly or by overriding styles in your own CSS files.