-
100+ Components
We offer a wide range of components and detailed page examples.
-
Responsive
Our components are fully responsive at any screensize.
-
Free updates
Pay once, receive updates forever. At no additional cost.
Easy to use
Copy. Paste. Why make it more difficult?
We've made the components easy to use. Simply browse the components gallery and copy what you need. Try it below!
Demo component
<div class="py-2 bg-gray-100">
<div class="w-full max-w-6xl px-4 mx-auto sm:px-6 md:px-8">
<!-- Desktop navbar -->
<header class="sticky top-0 z-10 w-full bg-white shadow rounded-2xl"
x-data="{ open: false }">
<nav class="flex items-center justify-between px-4 h-14">
<a class="text-lg font-semibold tracking-tight"
href="#">
Analytics
</a>
<ul class="items-center hidden space-x-2 text-sm font-medium text-gray-600 md:flex">
<li>
<a class="px-3 py-2 transition rounded-lg hover:text-blue-600 focus:text-blue-600 focus:outline-none hover:bg-blue-500/10 focus:bg-blue-500/10 focus:ring-2 focus:ring-blue-500 focus:ring-inset"
href="#">Dashboard</a>
</li>
<li>
<a class="px-3 py-2 text-blue-600 transition rounded-lg bg-blue-500/10 ring-2 ring-blue-500 ring-inset focus:outline-none"
href="#">
Sites
</a>
</li>
<li>
<a class="px-3 py-2 transition rounded-lg hover:text-blue-600 focus:text-blue-600 focus:outline-none hover:bg-blue-500/10 focus:bg-blue-500/10 focus:ring-2 focus:ring-blue-500 focus:ring-inset"
href="#">Teams</a>
</li>
<li>
<a class="block ml-3 transition rounded-full focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
href="#">
<div class="relative w-8 h-8">
<div class="absolute inset-0 bg-gray-200 rounded-full animate-pulse"></div>
<img class="absolute inset-0 object-cover rounded-full"
src="https://thispersondoesnotexist.com/image"
alt="">
</div>
</a>
</li>
</ul>
<!-- Hamburger -->
<div class="md:hidden">
<button
class="flex items-center justify-center w-10 h-10 -mr-2 text-blue-500 transition rounded-full hover:bg-gray-500/5 focus:bg-blue-500/10 focus:outline-none"
x-on:click="open = !open"
type="button">
<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 5.75H19.25"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 18.25H19.25"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 12H19.25"/>
</svg> </button>
</div>
</nav>
<!-- Mobile menu -->
<nav class="px-2 md:hidden"
x-show="open"
x-cloak>
<div class="border-t"></div>
<ul class="flex flex-col py-2 space-y-1 text-sm font-medium text-gray-600">
<li>
<a class="block p-2 transition rounded-lg hover:text-blue-600 focus:text-blue-600 focus:outline-none hover:bg-blue-500/10 focus:bg-blue-500/10 focus:ring-2 focus:ring-blue-500 focus:ring-inset"
href="#">Dashboard</a>
</li>
<li>
<a class="block p-2 text-blue-600 transition rounded-lg bg-blue-500/10 ring-2 ring-blue-500 ring-inset"
href="#">
Sites
</a>
</li>
<li>
<a class="block p-2 transition rounded-lg hover:text-blue-600 focus:text-blue-600 focus:outline-none hover:bg-blue-500/10 focus:bg-blue-500/10 focus:ring-2 focus:ring-blue-500 focus:ring-inset"
href="#">Teams</a>
</li>
<li>
<a class="block p-2 transition rounded-lg hover:text-blue-600 focus:text-blue-600 focus:outline-none hover:bg-blue-500/10 focus:bg-blue-500/10 focus:ring-2 focus:ring-blue-500 focus:ring-inset"
href="#">Settings</a>
</li>
</ul>
</nav>
</header>
<div class="grid gap-2 my-12 md:gap-6 md:grid-cols-2">
<aside class="space-y-2">
<h1 class="text-2xl font-semibold tracking-tight md:text-3xl">Personal Site</h1>
<a class="inline-flex items-center space-x-1 font-medium"
href="#">
<svg class="text-green-500 w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 10.5V10.3427C7.75 8.78147 7.65607 7.04125 8.74646 5.9239C9.36829 5.2867 10.3745 4.75 12 4.75C13.6255 4.75 14.6317 5.2867 15.2535 5.9239C16.3439 7.04125 16.25 8.78147 16.25 10.3427V10.5"/>
</svg>
<span>larsklopstra.nl</span>
</a>
</aside>
<aside class="space-y-2 md:justify-self-end">
<div>
<label class="sr-only"
for="date_range">Show statistics for</label>
<div class="relative group">
<select
class="block w-full pr-10 text-sm font-medium transition duration-75 border-gray-300 rounded-lg shadow-sm h-9 focus:border-blue-600 focus:ring-1 focus:ring-inset focus:ring-blue-600 bg-none"
id="date_range">
<option value="week">Last week</option>
<option value="month">Last month</option>
<option value="year">Last year</option>
</select>
<span
class="absolute inset-y-0 right-0 flex items-center justify-center text-gray-400 transition pointer-events-none w-9 h-9 group-focus-within:text-blue-500">
<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"/>
</svg> </span>
</div>
</div>
</aside>
</div>
<section class="grid gap-6 my-6 md:grid-cols-3">
<div class="p-6 bg-white shadow rounded-2xl">
<dl class="space-y-2">
<dt class="text-sm font-medium text-gray-500">Unique views</dt>
<dd class="text-5xl font-light md:text-6xl">192.1k</dd>
<dd class="flex items-center space-x-1 text-sm font-medium text-green-500">
<span>32k increase</span>
<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 15.25V6.75H8.75"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 7L6.75 17.25"/>
</svg> </dd>
</dl>
</div>
<div class="p-6 bg-white shadow rounded-2xl">
<dl class="space-y-2">
<dt class="text-sm font-medium text-gray-500">Bounce rate</dt>
<dd class="text-5xl font-light md:text-6xl">21%</dd>
<dd class="flex items-center space-x-1 text-sm font-medium text-red-500">
<span>7% increase</span>
<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 8.75V17.25H8.75"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 17L6.75 6.75"/>
</svg> </dd>
</dl>
</div>
<div class="p-6 bg-white shadow rounded-2xl">
<dl class="space-y-2">
<dt class="text-sm font-medium text-gray-500">Average time on page</dt>
<dd class="text-5xl font-light md:text-6xl">03:12</dd>
<dd class="flex items-center space-x-1 text-sm font-medium text-green-500">
<span>3% increase</span>
<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 15.25V6.75H8.75"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 7L6.75 17.25"/>
</svg> </dd>
</dl>
</div>
</section>
<section class="grid gap-6 my-6 md:grid-cols-2">
<div class="p-2 space-y-2 bg-white shadow rounded-xl">
<header class="px-4 py-2">
<h2 class="text-xl font-semibold tracking-tight">Visits per page</h2>
</header>
<div class="border-t"></div>
<div class="p-4">
<dl class="-my-2 space-y-1">
<div class="grid grid-cols-[2fr,1fr,1fr] gap-4 text-sm font-medium text-gray-500 pb-2">
<dt>Content</dt>
<dt class="text-right">Views</dt>
<dt class="text-right">Unique</dt>
</div>
<div class="relative py-2 -mx-2">
<div class="absolute inset-0 w-4/5 h-full rounded-lg bg-blue-500/5"></div>
<div class="grid grid-cols-[2fr,1fr,1fr] gap-4 text-sm font-medium px-2 relative">
<dd>/</dd>
<dd class="text-right">963</dd>
<dd class="text-right">567</dd>
</div>
</div>
<div class="relative py-2 -mx-2">
<div class="absolute inset-0 w-1/2 h-full rounded-lg bg-blue-500/5"></div>
<div class="grid grid-cols-[2fr,1fr,1fr] gap-4 text-sm font-medium px-2 relative">
<dd>/blog</dd>
<dd class="text-right">414</dd>
<dd class="text-right">124</dd>
</div>
</div>
<div class="relative py-2 -mx-2">
<div class="absolute inset-0 w-1/4 h-full rounded-lg bg-blue-500/5"></div>
<div class="grid grid-cols-[2fr,1fr,1fr] gap-4 text-sm font-medium px-2 relative">
<dd>/about-me</dd>
<dd class="text-right">251</dd>
<dd class="text-right">203</dd>
</div>
</div>
</dl>
</div>
</div>
<div class="p-2 space-y-2 bg-white shadow rounded-xl">
<header class="px-4 py-2">
<h2 class="text-xl font-semibold tracking-tight">Visits per country</h2>
</header>
<div class="border-t"></div>
<div class="p-4">
<dl class="-my-2 space-y-1">
<div class="grid grid-cols-[2fr,1fr,1fr] gap-4 text-sm font-medium text-gray-500 pb-2">
<dt>Country</dt>
<dt class="text-right">Views</dt>
<dt class="text-right">Unique</dt>
</div>
<div class="relative py-2 -mx-2">
<div class="absolute inset-0 w-2/3 h-full rounded-lg bg-blue-500/5"></div>
<div class="grid grid-cols-[2fr,1fr,1fr] gap-4 text-sm font-medium px-2 relative">
<dd>Netherlands</dd>
<dd class="text-right">71k</dd>
<dd class="text-right">40k</dd>
</div>
</div>
<div class="relative py-2 -mx-2">
<div class="absolute inset-0 w-1/2 h-full rounded-lg bg-blue-500/5"></div>
<div class="grid grid-cols-[2fr,1fr,1fr] gap-4 text-sm font-medium px-2 relative">
<dd>United States</dd>
<dd class="text-right">41k</dd>
<dd class="text-right">32k</dd>
</div>
</div>
<div class="relative py-2 -mx-2">
<div class="absolute inset-0 w-1/6 h-full rounded-lg bg-blue-500/5"></div>
<div class="grid grid-cols-[2fr,1fr,1fr] gap-4 text-sm font-medium px-2 relative">
<dd>Germany</dd>
<dd class="text-right">36k</dd>
<dd class="text-right">27k</dd>
</div>
</div>
</dl>
</div>
</div>
</section>
<footer class="my-6">
<ul class="flex flex-wrap items-center justify-center gap-6 text-sm text-center text-gray-500">
<li>
<a class="transition hover:text-gray-800 focus:underline focus:outline-none"
href="#">Careers</a>
</li>
<li>
<a class="transition hover:text-gray-800 focus:underline focus:outline-none"
href="#">Privacy</a>
</li>
<li>
<a class="transition hover:text-gray-800 focus:underline focus:outline-none"
href="#">Terms of service</a>
</li>
<li>
<a class="transition hover:text-gray-800 focus:underline focus:outline-none"
href="#">Support</a>
</li>
</ul>
</footer>
</div>
</div>
Testimonials
What others say
A beautifully crafted package of components for TailwindCSS. A big win if you want to build your application fast and good-looking!
Dennis Smink
Founder of ploi.io
Lovely looking components, will definitely use them as a starting point for my upcoming products. They fit right in with my style!
Boris Lepikhin
Founder of reel
With this bundle, your products will instantly look great and feel familiar. The large number of examples is amazing. Your users will love it.
Sebastiaan Kloos
Founder of Codecycler
Design your next site in minutes
Purchase a package and get instant access to 100+ components.
Purchase nowQuestions and answers
-
UI Kits are copy-and-pastable components which can be accessed through our website. Purchasing a UI Kit will not grant access to it's counter library like Blade UI. Libraries are ready to use components for frameworks, these can be locally downloaded through a package manager like Composer. Purchasing a library will not grant access to it's counter UI Kit and libraries for other frameworks.
-
Yes! you can use this package with your team as long as you purchase it specifically for the team. We recommend using a team email address.
-
No, you can't redistribute our component in any shape or form. It's also not allowed to build other UI kits based on Razor UI.
-
Yes, as long as the main purpose of the project isn't something like a page builder or an admin panel package. It's completely okay to use our components as a part of a bigger and unrelated open-source project.
-
Same as the open-source projects. You can use Razor UI to build a paid tool as long as the tool isn't a page builder or an admin panel builder.
-
Same as the open-source projects. You can use Razor UI for client work, as long as the client project isn't a UI kit or a tool for building a page builder or an admin panel builder.
-
No. You can use Razor UI for as many projects as you like.
-
No, they're considered different products. You'll need to purchase a new license. However, customers get an exclusive discount on new releases.
-
Updates for each package are forever free, at no additional cost.
-
Yes. We appreciate our customers, so we reward them with discounts on any Razor UI packages we release in the future.
-
No. The templates use Alpine.js because it's part of the template, and easy to port to other frameworks. You'll find the code intuitive regardless of your coding background.
-
We appreciate them! As part of your purchase, you'll get access to our Discord server where you can provide suggestions and we'll gladly discuss them.
-
We only offer support for payment-related issues. However, in the Discord community - that's part of your purchase - you can talk to us and other customers. The odds are likely someone will be able to help you out.
-
Libraries are implementations with a complete API for a specific framework. Instead of HTML, you get ready to use building blocks. You can see their API before you purchase them.