It's super fast and easy to use
Tailkit's web application is a joy to use.
Use it to preview all available components and copy them with a single click. Use it to get access to all available templates and helper tools. Use it customize your experience. Use it to build your next masterpiece.
Works like magic
Preview Pane
Meet the handiest feature you’ll be using! Each available Tailwind component can be previewed and handled through our custom coded pane. It comes packed with amazing features.
Boost your workflow
Helper Tools
Design even faster with our growing collection of interactive helper tools. Easily build your buttons, find and copy your favorite SVG icons or available color classes.
SVG icon libraries
You can search over 3,700 SVG icons (Heroicons + Bootstrap Icons), easily copy-paste their code into your HTML code and customize them even further with CSS classes.
Button builder
With just a few clicks, you can easily replicate any of the available button designs, generate their HTML code on the fly and copy with a single click. It’s as easy as it can get.
Color palette
Visually preview the available color palette and copy any available Tailwind CSS color class or color value with a single click. Really useful finding the perfect colors for your design.
Make it yours!
Customize your experience.
Ready to make Tailkit truly yours? Dive in and tweak everything from layouts to tech preferences – it's like having a digital playground designed just for you.
Components category view
You can set the category view preference for the UI components. You can preview them in a 3 column grid, a list or even a list with preview pane enabled.
Default tech to copy
You can select the technology (HTML, React, Vue.js and Alpine.js) that you want to copy by default when you are using the copy component button.
Color editornew colors added
The default primary color, used in all Tailwind components, is blue but you can change it to any of the 8 available colors to match your preferences.
Custom primary color name
If you are using your own primary color with all default shades (50-950), you can change the primary color name in all code snippets to match your brand.
Dark mode preference
You can set dark mode to be the default mode in the preview pane. This way, you will always preview the dark version of each component by default.
Remove dark mode classesnew
You don't plan to use dark mode in your project? No problem! You can easily remove all the dark mode classes by default with a single click.
Built to perfection
It comes with features you will love using.
Beautiful and fully responsive design which comes with dark mode support, global search to easily find what you are looking for and a User Interface fast as a rocket.
Beautiful design.
Elegant and intuitive interface that enhances your workflow without overwhelming you.
Fully responsive
Intuitive navigation
Consistent design language
Dark mode.
Embrace the dark side or bask in the light. Work in the dark or light mode. It's your call.
Reduced eye strain
Auto system preference detection
Remembers your preference
Global search.
Find anything instantly with our powerful and intuitive search functionality.
Instant results
Search across all main sections
Trigger with a shortcut
Super fast.
Do more in less time. Experience lightning-quick responsiveness with our optimized UI.
Instant page transitions
Optimized for performance
CDN powered assets
Craft stunning UIs effortlessly