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
SOCIAL SHARE CARD GENERATOR