SudarUI
271+ Free Components

SudarUI

Free Tailwind Components for Sat-set Developers

Copy-paste ready components to build beautiful, responsive websites faster. No installation required — just Tailwind CSS.

No Config
No Install
No Setup
Browse ComponentsStar on GitHub
Development

Building the Web of Tomorrow

Discover the latest trends in frontend development, from modern CSS features to powerful new JavaScript frameworks.

BL
Buah Lil

Beautifully crafted,
ready to copy.

Skip the boilerplate. Our components are designed to drop seamlessly into your project with zero configuration. Just raw HTML & Tailwind.

<div class="max-w-sm bg-white rounded-3xl shadow-xl overflow-hidden group">
  <div class="h-48 overflow-hidden relative">
    <div class="w-full h-full bg-gradient-to-br from-lime-400 to-green-600 group-hover:scale-105 transition-transform"></div>
    <div class="absolute top-4 left-4">
      <span class="px-3 py-1 bg-white/90 text-lime-600 text-xs font-bold rounded-full">Tech</span>
    </div>
  </div>

  <div class="p-6">
    <h3 class="text-xl font-bold mb-2 group-hover:text-lime-500">Building the Web</h3>
    <p class="text-gray-500 text-sm mb-6 line-clamp-2">Discover the latest trends in frontend.</p>

    <div class="flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-lime-300 to-lime-500 flex items-center justify-center text-xs font-bold text-gray-900">BL</div>
        <span class="text-sm font-medium">Buah Lil</span>
      </div>
      <button class="text-sm font-bold text-lime-600 flex items-center gap-1">
        Read more <svg class="w-4 h-4">...</svg>
      </button>
    </div>
  </div>
</div>

How It Works

Get started in three simple steps

Browse Components

Explore our collection and find the perfect component for your project.

Copy the Code

Click the copy button to copy the component code to your clipboard.

Paste & Customize

Paste the code into your project and customize it to match your design.

Why Joko UI?

Everything you need to build modern interfaces, without the bloat.

Fully Customizable

Easily adapt the styles to match your brand using standard Tailwind CSS classes.

Dark Mode Ready

Every component is thoughtfully designed to look perfect in both light and dark themes.

Accessible

Built with semantic HTML and ARIA attributes to ensure usability for everyone.

Lightweight

Zero dependencies. Just copy the code and you are ready to ship your product.

Component Categories

Explore our collection of beautifully designed, production-ready Tailwind CSS components.

Application Components

6 components

Navbars

Navigation bars that allow users to move through the application

5 components

Sidebars

Vertical navigation menus typically placed on the left side of the screen.

6 components

Dropdowns

Interactive floating menus and popovers for displaying lists of actions or selections.

6 components

Breadcrumbs

Breadcrumbs help users understand their current location within a hierarchy.

See more

Marketing Components

6 components

Headers

Responsive navbar for marketing websites

5 components

Hero Sections

Eye-catching hero sections for landing pages

7 components

CTAs

Call-to-action sections to drive conversions

7 components

Banners

Banner examples to add important information, CTA, or announcement

See more

Works seamlessly with

React
Next.js
Vue
Nuxt
Svelte
Angular
Astro
Laravel
HTML

Frequently Asked Questions

Got questions? We've got answers.

Is it really free?
Yes, absolutely! Joko UI is open-source and free to use for both personal and commercial projects. You don't need to pay anything or add attribution, though it's always appreciated!
Do I need to install any npm packages?
No installations required. Joko UI follows a copy-and-paste philosophy. Just copy the code of the component you want and paste it directly into your project. You have full ownership of the code.
Which frameworks are supported?
The components are built with React and Tailwind CSS. They work perfectly with Next.js, Vite, Create React App, Remix, and any other React-based framework that supports Tailwind.