A Minimal UI Component Kit for React, Tailwind CSS v4 - Setxo-React npm package

Amin Khadivar — Mon, 30 Jun 2025 22:59:32 +0000

As a full-stack developer, I often faced the same frustrations when building UIs in React:

Headless libraries that require too much wiring

UI kits bloated with styles I didn’t need

Awkward integration between Tailwind CSS and React transitions

So I decided to build my own: Setxo — a lightweight, unstyled, and fully customizable component library powered by Tailwind CSS and Framer Motion.

Setxo is not another UI kit with predefined themes or hundreds of props. It gives you complete control over the look and behavior of your components — while still offering smooth interactions and sensible defaults.

🎯 Why Setxo?

Here’s what makes Setxo stand out:

🛠️ Built with Tailwind CSS v4 in mind

🎞️ Framer Motion used for all transitions and animations

📦 Tree-shakable and lightweight bundle size

🎯 Fully controlled components

🧩 Common UI patterns like Modal, Drawer, Tabs, Popover, Tooltip, Dropdown, Accordion

💅 Unstyled by default — style it your way

Setxo is perfect for developers who don’t want to sacrifice control just to save a few hours on UI boilerplate.
🧪 Example Usage

Let’s look at a simple example with the Drawer component:

import { Drawer , Button } from 'setxo-react'

export default function Example() {

  return (
    <Drawer
     id="topDrawer"
     placement="top"
     width="w-full"
     title="Top Drawer"
     trigger={
      <Button color="primary">Show top drawer</Button>
     }
     content={
      <>
       <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget dolor morbi non arcu. Et odio pellentesque diam volutpat commodo sed. Quam quisque id diam vel quam. Vel quam elementum pulvinar etiam non. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Venenatis lectus magna fringilla urna porttitor. Vulputate odio ut enim blandit volutpat maecenas. Aenean sed adipiscing diam donec adipiscing tristique. Pretium nibh ipsum consequat nisl. Semper viverra nam libero justo laoreet sit amet cursus sit.
      </p>
      <div className="sm:flex grid">
       <Button color="primary">Call to action</Button>
      </div>
     </>
    }
   />
  )
}

All components are headless and unstyled — built to blend perfectly with your Tailwind setup.
📚 What’s Included?

Current list of components:

Accordion , Alert , Avatar , Badge , Breadcrumb , Button , Carousel , CloseButton , Collapse , Drawer , Dropdown , Modal , Nav , Navbar Pagination , Popover , Progress , Spinner , Tab , Tooltip , Divider , Image , Links , List , Table , Typography , Forms , Checkbox , FormControl , Radio , Range , Select , Switch , DarkModeToggle , 

…and more coming soon!

You can check the full documentation here:
👉 [https://setxo.com (🌍 Live Demo)]

After years of freelance work and building dashboards, admin panels, and full websites, I realized I was repeating myself — copy/pasting similar component logic again and again.

Setxo is a product of that repetition — distilled into a clean, reusable kit with animations and developer experience in mind.
🧭 Roadmap

Here’s what’s coming soon to Setxo:

Dark mode support

Accessibility improvements (ARIA roles & keyboard nav)

Storybook UI explorer

Example templates

JavaScript improvements

🤝 Contribute

I’d love your feedback or suggestions!

Whether it’s bug reports, pull requests, or just a ⭐ star on GitHub, it means a lot — especially for open-source devs working from underrepresented regions.

[GitHub: https://github.com/aminkhadivar/setxo-react]

👨‍💻 About Me

I’m Amin Khadivar, a full-stack React + Laravel developer from Iran 🇮🇷, working freelance for over 7 years. Setxo is my attempt at giving back to the dev community and making UI building a little smoother.

👉 Documentation: [https://setxo.com]
👉 Package: [https://www.npmjs.com/package/setxo-react]

🙏 Final Words

If you’ve ever wanted a modern, lightweight, and fully customizable UI component kit that respects your Tailwind setup — Setxo is built for you.

Try it. Fork it. Contribute. Or just drop me a note — I’d love to hear from you.

npm install setxo-react

DEV Community: Amin Khadivar

A Minimal UI Component Kit for React, Tailwind CSS v4 - Setxo-React npm package