New Features Updated!
TailwindCSS
4.1
Modern, Customisable
UI Components
for your Tailwind CSS project
A collection of handcrafted, beautiful CSS UI components for building modern web applications.
Save Time, Build Quickly, Ship Faster
30+ ready-to-use components out of the box. Spend less time writing CSS, more time focusing on launching your app.
Free & Open-Source Library
Free access to open-source UI components that you can copy-paste right into your Tailwind project.
Light & Dark Themes
Choose from available preset themes or create your own unique style with a versatile theme customisation variables.
Consistent UI on Any Project
Fully compatible with any framework that uses Tailwind CSS. Delivering uniform design language across projects.
UI Components
Functional Components
That Just
Work.
Choose from over
30+ themable and responsive components
with a wide range of variants, meticulously crafted with modern CSS capabilities.
Button
7 Variants
Dropdown Menu
13 Variants
What is a UI library?
A UI library is a collection of pre-built components that developers use to build the frontend user interface of a web application more efficiently.
Where can I download the TropicUI library?
You may visit tropicui.com and follow the installation instructions outlined in the documentation.
How to use a UI library?
Simply @import the UI library to your main css file after tailwindcss and execute the following command in your working terminal:
$ npm run dev
Accordion
5 Variants
AD
+99
Avatar
7 Variants
Switch
4 Variants
Retrying...
Status + Tag
11 Variants
Popover is great for showing helpful text to the user in your app.
Popover
2 Variants
Spinner
3 Variants
and many more..
and many more..
and many more..
and many more..
and many more..
Semantic Code
Write Less <Code/>,
Get More Done.
With TropicUI
semantic classes
approach, you can quickly compose professional looking UI block in fraction of the time, while maximising your productivity.
<div class="card w-96">
<div class="card-body">
<h3 class="font-semibold mb-2">Welcome back.</h3>
<div class="form">
<div class="form-field">
<span class="text-base-dense">Sign in to access your account</span>
</div>
<div class="form-field">
<div class="input input-invalid">
<input type="email" placeholder="Email">
<div class="form-helper invalid">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
</svg>
</div>
</div>
<div class="form-helper text-sm invalid">Email is required!</div>
</div>
<div class="form-field">
<div class="input">
<input type="password" value="secret" placeholder="Password">
<label class="btn btn-clear btn-toggle">
<input type="checkbox" id="show-password">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="btn-toggled-icon"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>
</label>
</div>
</div>
<div class="form-field">
<label>
<input type="checkbox" class="checkbox checkbox-accent" checked>
<span>Remember me</span>
</label>
</div>
<div class="form-field">
<button class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>Welcome back.
Sign in to access your account
Email is required!
Download Package
Try TropicUI Now.
Start your project right with the right tool.