Free Tailwind CSS UI Components: David UI Interactive Library
With David UI you get access to more than 35 Free & Open Source Interactive Tailwind CSS Components such as Modal, Dropdown, Tabs, Accordion, Tooltip, etc. Just include a CDN script and copy paste some HTML from creative-tim.com/david-ui and you’re good to go!
At some point in every vibe project we reach a stage where things look…almost perfect! But they’re not. You have the structure, the sections, but you realize you need a modal, a dropdown, some tabs to change the content, etc. Your agent’s output is great on paper, but it feels weird. The padding is wrong, the opening animation is funky, and your website looks unfinished.
David UI is a Free & Open Source Library of Interactive Tailwind CSS Components created by Creative Tim. It includes 35+ components for typical UI needs like Modals, Dropdowns, Accordions, Tooltips, Tabs, Popovers, Steppers, Forms, Gallery, Timelines, etc. They’re all written using Tailwind CSS and come with pre-configured JS so you don’t have to worry about wiring events.
Source
creativetimofficial/david-ai
★ 6,085HTML
It has components for everything from basic items like Badges, Avatars, Buttons, Breadcrumbs, to complex ones like Multi Step Forms (Steppers), Data Tables, Nested Dropdowns, Modal Dialogs with Focus Management, etc. Plus, most components have accessibility attributes added out of the box which is something I always forgot to do when building these things myself.
How to use free Tailwind CSS interactive components from David UI
- 1Go to creative-tim.com/david-ui in your browser — no signup needed
- 2Browse the component library and pick what you need (modal, dropdown, tabs, accordion, etc.)
- 3Click the HTML tab in the component preview and copy the full markup snippet
- 4Add the CDN script tag to your HTML file's head section (see below)
- 5Paste the component HTML wherever it should go — your agent can adjust colors, text, and sizing
<script src="https://cdn.jsdelivr.net/gh/creativetimofficial/[email protected]/packages/dist/david-ai.min.js" defer ></script>
After adding that one line of code to your HTML, all david-ui components will start working automatically. No NPM packages, no build systems, no configuration needed. Interactions (opening/closing, toggles, focus trapping in Modals) will just work. This is ideal for vibe coders because we don’t have to worry about the implementation details, we just choose what we want and add it to our project, then the agent takes care of adapting the content to our needs.
35+ free, production-ready interactive UI components — modals, dropdowns, tabs, accordions, tooltips, steppers, forms, and more. Browse the full library at creative-tim.com/david-ui, copy the HTML, drop in one CDN script tag. No install, no npm, no configuration. Your agent already knows Tailwind — David UI gives it the interactive structure to work from.
Source: github.com
Free course
Stop reading about AI — start building with it
The free Claude Code course: your first site, tool or game — no coding. No upsells, no cross-sells — nothing to buy here.
Start free →▌ Related guides
Author
Evgenii Arsentev
PhD · Chief Executive Officer, digital health
Articles · Latest articles