Build and ship fast with Tailwind CSS UI components
Move faster with beautiful, responsive UI components and website templates with modern design, 100% free and open-source.
Turn your ideas into reality
JsxKit UI offers all the vital building blocks you need to transform your idea into a great-looking startup.
Beautifully designed
JsxKit UI allows you build beautiful and modern websites regardless of your design skills.
Fully Responsive
Responsive designed components and templates that look great on any screen.
Customizable
copy and paste into your apps and experience the power of customizable components.
Use your favorite framework
Copy and paste the components you want with your favorite JS framework
<div class="max-w-2xl mx-auto px-4">
<div class="items-start justify-between sm:flex">
<div>
<h4 class="text-gray-800 text-xl font-semibold">Team members</h4>
<p class="mt-2 text-gray-600 text-base sm:text-sm">Give your team members access to manage the system.</p>
</div>
<a href="javascript:void(0)" class="inline-flex items-center justify-center gap-1 py-2 px-3 mt-2 font-medium text-sm text-center text-white bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg sm:mt-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
New member
</a>
</div>
<ul class="mt-12 divide-y">
<!-- Repeat this block for each member -->
<li class="py-5">
<div class="flex gap-3">
<img src="https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg" class="flex-none w-12 h-12 rounded-full" alt="John lorin's avatar">
<div>
<span class="block text-sm text-gray-700 font-semibold">John lorin</span>
<span class="block text-sm text-gray-600">john@example.com</span>
</div>
</div>
</li>
<!-- Repeat the above block for each member in your 'members' array -->
</ul>
</div>
Use your favorite framework
Copy and paste the components you want with your favorite JS framework
<div class="max-w-2xl mx-auto px-4">
<div class="items-start justify-between sm:flex">
<div>
<h4 class="text-gray-800 text-xl font-semibold">Team members</h4>
<p class="mt-2 text-gray-600 text-base sm:text-sm">Give your team members access to manage the system.</p>
</div>
<a href="javascript:void(0)" class="inline-flex items-center justify-center gap-1 py-2 px-3 mt-2 font-medium text-sm text-center text-white bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg sm:mt-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
New member
</a>
</div>
<ul class="mt-12 divide-y">
<!-- Repeat this block for each member -->
<li class="py-5">
<div class="flex gap-3">
<img src="https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg" class="flex-none w-12 h-12 rounded-full" alt="John lorin's avatar">
<div>
<span class="block text-sm text-gray-700 font-semibold">John lorin</span>
<span class="block text-sm text-gray-600">john@example.com</span>
</div>
</div>
</li>
<!-- Repeat the above block for each member in your 'members' array -->
</ul>
</div>Professional website templates
A collection of professional and beautifully designed website templates, built on top of React, Next.js with Tailwind CSS.
Ready to use templates
Explore pre-designed templates to quickly begin building your application or website.
Good template scores
Our templates are made to be super fast, easy for everyone to use, and show up well on search engines.
Make your ideas come to life with no time
Copy and paste our ready to use components into your apps, and save time, or use it in MarsX.