Drag-and-drop shadcn/ui page composer that installs pages with the shadcn CLI
EXPLORE THE DIRECTORY
UI Design Tools.
Icon libraries, visual builders and small Tailwind generators that help developers design interfaces without leaving the code. Many are free.
Shadcn Page BuilderSPONSOREDDrag-and-drop shadcn/ui page composer that installs pages with the shadcn CLISPOTLIGHT · DESIGNSponsoredYour product here
Advertise in Design All design tools
34 products Reviewed by the Tailkits editors. No votes, no rankings.
Install shadcn/ui blocks without leaving your IDE
AI-powered platform fo web and application designs.
AI designer for iOS and Android app screens, with Figma and Tailwind export
28K+ SVG icons, 14 styles, free CDN included
Icons, illustrations, and AI tools for designers
63K+ icons, 30 styles, free SVG toolkit.
1,500+ SVG icons with React, Vue, and Figma support
51,000+ icons in 10 styles for designers and devs
42,000+ animated icons, free and PRO plans
438K+ icons, illustrations, and emoji for designers
Free icon library, 1,500+ SVGs in 6 weights
35,000+ premium SVG icons with app & React packages
Real-time Tailwind theme tweaker
AI builder for Tailwind forms, tables and charts
Design with real HTML, export React code instantly
Figma's prompt-to-app tool that turns your designs into published web apps
Visual Tailwind CSS editor with AI, 1,000+ blocks and export to 10 frameworks
Generate text shadows for Tailwind CSS
Free Tailwind grid builder: click cells, drag spans, copy the classes
Instant Tailwind class inspector & editor
Free Tailwind box shadow builder: sliders, inset, color and one class
Visual Tailwind & React UI component builder
Convert pixels to Tailwind font size classes
Visual Tailwind CSS editing in your browser
Copy from Tailwind CSS color palette in HEX
Online editor for Tailwind CSS developers with UI components
A free collection of SVG skeleton loader UI elements for Tailwind projects
Visual React & Tailwind drag-and-drop site builder
Drag & drop builder for website and dashboard templates
60 Free and custom Tailwind CSS Animations
Tailwind CSS gradients collection
Create Tailwind CSS color palettes with AI in seconds
Online code editor for Tailwind CSS
Nothing here. Yet.
Try a different search or clear a filter to find what you need.
A little less searching. A little more building.
Built something good? Submit a productHow to choose design tools as a developer
The design tools here help developers design in code, or close to it. They fall into three groups.
Icon libraries: free sets such as Phosphor and Hugeicons, animated icons from Lordicon, and large premium libraries such as Font Awesome, Nucleo and Streamline. Check the license, the styles on offer and whether there is a React or Vue package.
Visual builders: Windframe, Subframe, Tails, Chai Builder and Shadcn Page Builder let you compose pages visually and export the code, and Paper.design lets you design with real HTML. Check what comes out: HTML with Tailwind classes, React components or shadcn/ui blocks.
Tailwind generators and helpers: free tools for color palettes, themes, gradients, shadows, grid layouts and animations, plus Tailscan and Tailwind Lens, which inspect and edit the Tailwind classes on any page in your browser.
For finished designs rather than parts, browse Tailwind templates and Tailwind components.