David UI

David UI is a free, open-source Tailwind CSS component library from Creative Tim, published as the npm package david-ai with 35 ready-to-use, customizable UI components.

What is David UI?

David UI is a collection of production-ready UI components built with Tailwind CSS, distributed free under the MIT License. The library is maintained by Creative Tim and works in any project that already has Tailwind CSS installed. It supplies a wide range of interface building blocks—from basic buttons and badges to interactive components like accordions, modals, tooltips, and steppers—and you can install it via CDN or npm.

Key Features

• 35+ Tailwind CSS components — The library includes accordion, alert, avatar, badge, breadcrumbs, button, button group, card, checkbox, chip, collapse, dropdown, footer, icon button, image, input, list, modal, navbar, pagination, popover, progress bar, radio button, rating bar, sidebar, spinner, stepper, switch, table, tabs, textarea, tooltip, typography, timeline, and video components.
• Two usage modes — Use simple ESM imports like initAlert() for basic components, or switch to programmatic classes like Accordion for fine-grained control, TypeScript type safety, and instance methods such as showAll(), hideAll(), and toggle().
• TypeScript support — The programmatic API exports interfaces and config objects (for example, AccordionConfig and IAccordion), enabling autocompletion, type checking, and clean setup/cleanup lifecycle management.
• CDN and npm installation — Include the library in an HTML page with a single deferred script from jsDelivr, or install it in your project with npm i david-ai.
• Requires only Tailwind CSS — The components are styled with Tailwind utility classes, so you need Tailwind CSS installed to style them correctly.
• MIT licensed — Free for personal and commercial projects, with no attribution or licensing fees.
• Documentation and live previews — Each component has its own docs page at creative-tim.com/david-ui with code snippets and interactive examples.

Who should use David UI?

• Tailwind CSS developers — Quickly add polished, customizable components to your projects without writing markup and JavaScript from scratch.
• Dashboard and admin panel builders — Use the sidebar, navbar, table, progress bar, and rating bar components to assemble data-heavy interfaces faster.
• Startup founders and indie makers — Compose a professional-looking landing page or web app by combining cards, typography, buttons, and navigation components.
• Open-source enthusiasts — Contribute new components, report issues, or submit pull requests to grow the library alongside the community.

What can you do with David UI?

• Build a marketing website: Combine navbar, footer, typography, buttons, and cards to create a complete landing page with Tailwind CSS.
• Assemble an admin dashboard: Use the sidebar, navbar, table, progress bar, and rating bar components for data-heavy internal tools.
• Add interactive elements: Implement accordions, tabs, modals, tooltips, popovers, and dropdowns with a few lines of JavaScript.
• Programmatically control components: Instantiate classes like Accordion with TypeScript to manage state, trigger methods externally, and clean up on page unload.

How does David UI work?

Install the package or include the CDN script, import the component functions or classes you need, and call them in your JavaScript. For example, initAlert() activates alert behavior after you add the markup, while new Accordion(container, config) gives you an instance with methods to show, hide, and toggle items. The components rely on Tailwind CSS utility classes for styling.

FAQ

Is David UI free?

Yes, David UI is free and open-source, released under the MIT License. You can use it in personal and commercial projects without paying fees or giving attribution.

What is the npm package name?

The package is published as david-ai on npm and can be installed with npm i david-ai. The repository was previously named tailwind-starter-kit.

What is the difference between ESM and programmatic usage?

ESM imports like initAlert are simplest for basic components. The programmatic approach, used by components like Accordion, Tabs, and Tooltip, gives you TypeScript types, instance methods, and full control over behavior and cleanup.

Does David UI work with React, Vue, or Angular?

David UI works in any project that has Tailwind CSS installed, regardless of the frontend framework. The npm usage example shows imports in a TypeScript/JSX context, and the components are framework-agnostic.