uiable

KO | EN

gitlite — search

#php #javascript #python #ios #library #ruby #objective-c #dotfiles #java #wordpress #linux #jquery

★ 68 Open GitHub ↗

A free, open-source collection of beautifully designed UI components that you can copy, paste, customize, and make your own.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <h1>UIAble</h1>
  <p><strong>A modern UI library built with Tailwind CSS and Shadcn architecture.</strong></p>
  <p>
    <a href="https://react.dev"><img src="https://img.shields.io/badge/React-19%2B-007ec6?style=flat-square&logo=react&logoColor=61DAFB" alt="React"></a>
    <a href="https://nextjs.org"><img src="https://img.shields.io/badge/Next.js-16%2B-007ec6?style=flat-square&logo=next.js&logoColor=white" alt="Next.js"></a>
    <a href="https://tailwindcss.com/"><img src="https://img.shields.io/badge/Tailwind_CSS-4%2B-007ec6?style=flat-square&logo=tailwind-css&logoColor=white" alt="Tailwind CSS"></a>
    <a href="https://ui.shadcn.com/"><img src="https://img.shields.io/badge/shadcn%2Fui-4%2B-007ec6?style=flat-square&logo=shadcnui&logoColor=white" alt="shadcn/ui"></a>
    <a href="https://base-ui.com/"><img src="https://img.shields.io/badge/Base_UI-1%2B-007ec6?style=flat-square" alt="Base UI"></a>
    <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-007ec6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript Ready"></a>
    <br />
    <a href="https://discord.com/invite/txPuEn5atw"><img src="https://img.shields.io/badge/Discord-5865F2?style=flat-square&logo=discord&logoColor=white" alt="Discord"></a>
    <a href="https://x.com/uiable"><img src="https://img.shields.io/badge/@uiable-black?style=flat-square&logo=x&logoColor=white" alt="X"></a>
  </p>
</div>

UIAble is an open-source collection of reusable UI components designed for developers who want clean, practical, and fully customizable building blocks for modern frontend projects, without lock-in, without unnecessary abstraction, and without rebuilding the same UI patterns from scratch every time.

![UIAble Banner](https://raw.githubusercontent.com/codedthemes/uiable/master/public/assets/images/banner/free-version-banner.gif)

---

## Why UIAble?

Most UI libraries built on Shadcn end up looking and feeling nearly identical. Same structure. Same visual defaults. Same tradeoffs.

UIAble was built to be different, not by adding more features but by being more intentional about what a component library should actually do in a real project.

The common frustrations with existing libraries:

- Too opinionated about things that should be left to you
- Components that look great in demos but break under real product requirements
- Hard to customize after initial setup
- Dependency-heavy structures that become difficult to escape
- Logic hidden behind abstraction layers you can't inspect or modify

UIAble addresses all of these directly.

---

## What Makes It Different

### You get the actual code

No black-box packages. Components are copied directly into your codebase. You see them, you edit them, you own them.

### Built for real product UI

The focus is on components that handle real requirements, including form validation, edge case inputs, accessible dialogs, scalable tables, and proper keyboard navigation, rather than components optimized for screenshots.

### Tailwind-first, not Tailwind-locked

UIAble uses Tailwind CSS in a clean, sensible way. No class soup. No structural gymnastics. Just readable component code that happens to use Tailwind well.

### No lock-in

If you stop using UIAble tomorrow, your code still works. Because it's already yours.

### Open source from day one

The entire component library is transparent and open for contribution. No gated tiers. No "pro" version. Just components.

---

## Tech Stack

| Layer        | Technology                 |
| ------------ | -------------------------- |
| Styling      | Tailwind CSS v4            |
| Architecture | shadcn/ui                  |
| Primitives   | Base UI                    |
| Language     | TypeScript                 |
| Framework    | React (Next.js compatible) |

---

## Components

### Form Controls

<div>
  <a href="https://uiable.com/components/button" title="Button"><kbd>Button</kbd></a>
  <a href="https://uiable.com/components/button-group" title="Button Group"><kbd>Button Group</kbd></a>
  <a href="https://uiable.com/components/checkbox" title="Checkbox"><kbd>Checkbox</kbd></a>
  <a href="https://uiable.com/components/combobox" title="Combobox"><kbd>Combobox</kbd></a>
  <a href="https://uiable.com/components/command" title="Command Palette"><kbd>Command Palette</kbd></a>
  <a href="https://uiable.com/components/date-picker" title="Date Picker"><kbd>Date Picker</kbd></a>
  <a href="https://uiable.com/components/input" title="Input"><kbd>Input</kbd></a>
  <a href="https://uiable.com/components/input-group" title="Input Group"><kbd>Input Group</kbd></a>
  <a href="https://uiable.com/components/input-otp" title="Input OTP"><kbd>Input OTP</kbd></a>
  <a href="https://uiable.com/components/native-select" title="Native Select"><kbd>Native Select</kbd></a>
  <a href="https://uiable.com/components/radio" title="Radio"><kbd>Radio</kbd></a>
  <a href="https://uiable.com/components/radio-group" title="Radio Group"><kbd>Radio Group</kbd></a>
  <a href="https://uiable.com/components/select" title="Select"><kbd>Select</kbd></a>
  <a href="https://uiable.com/components/slider" title="Slider"><kbd>Slider</kbd></a>
  <a href="https://uiable.com/components/switch" title="Switch"><kbd>Switch</kbd></a>
  <a href="https://uiable.com/components/textarea" title="Textarea"><kbd>Textarea</kbd></a>
  <a href="https://uiable.com/components/toggle" title="Toggle"><kbd>Toggle</kbd></a>
  <a href="https://uiable.com/components/toggle-group" title="Toggle Group"><kbd>Toggle Group</kbd></a>
</div>

### Data Display

<div>
  <a href="https://uiable.com/components/avatar" title="Avatar"><kbd>Avatar</kbd></a>
  <a href="https://uiable.com/components/badge" title="Badge"><kbd>Badge</kbd></a>
  <a href="https://uiable.com/components/card" title="Card"><kbd>Card</kbd></a>
  <a href="https://uiable.com/components/carousel" title="Carousel"><kbd>Carousel</kbd></a>
  <a href="https://uiable.com/components/chart" title="Chart"><kbd>Chart</kbd></a>
  <a href="https://uiable.com/components/data-table" title="Data Table"><kbd>Data Table</kbd></a>
  <a href="https://uiable.com/components/empty" title="Empty State"><kbd>Empty State</kbd></a>
  <a href="https://uiable.com/components/hover-card" title="Hover Card"><kbd>Hover Card</kbd></a>
  <a href="https://uiable.com/components/kbd" title="KBD"><kbd>KBD</kbd></a>
  <a href="https://uiable.com/components/label" title="Label"><kbd>Label</kbd></a>
  <a href="https://uiable.com/components/list-group" title="List Group"><kbd>List Group</kbd></a>
  <a href="https://uiable.com/components/table" title="Table"><kbd>Table</kbd></a>
  <a href="https://uiable.com/components/tooltip" title="Tooltip"><kbd>Tooltip</kbd></a>
  <a href="https://uiable.com/components/skeleton" title="Skeleton"><kbd>Skeleton</kbd></a>
  <a href="https://uiable.com/components/calendar" title="Calendar"><kbd>Calendar</kbd></a>
</div>

### Feedback & Overlays

<div>
  <a href="https://uiable.com/components/alert" title="Alert"><kbd>Alert</kbd></a>
  <a href="https://uiable.com/components/alert-dialog" title="Alert Dialog"><kbd>Alert Dialog</kbd></a>
  <a href="https://uiable.com/components/dialog" title="Dialog"><kbd>Dialog</kbd></a>
  <a href="https://uiable.com/components/drawer" title="Drawer"><kbd>Drawer</kbd></a>
  <a href="https://uiable.com/components/progress" title="Progress"><kbd>Progress</kbd></a>
  <a href="https://uiable.com/components/sheet" title="Sheet"><kbd>Sheet</kbd></a>
  <a href="https://uiable.com/components/sonner" title="Sonner"><kbd>Sonner</kbd></a>
  <a href="https://uiable.com/components/spinner" title="Spinner"><kbd>Spinner</kbd></a>
</div>

### Navigation

<div>
  <a href="https://uiable.com/components/breadcrumb" title="Breadcrumb"><kbd>Breadcrumb</kbd></a>
  <a href="https://uiable.com/components/dropdown-menu" title="Dropdown Menu"><kbd>Dropdown Menu</kbd></a>
  <a href="https://uiable.com/components/menubar" title="Menubar"><kbd>Menubar</kbd></a>
  <a href="https://uiable.com/components/navbar" title="Navbar"><kbd>Navbar</kbd></a>
  <a href="https://uiable.com/components/navigation-menu" title="Navigation Menu"><kbd>Navigation Menu</kbd></a>
  <a href="https://uiable.com/components/pagination" title="Pagination"><kbd>Pagination</kbd></a>
  <a href="https://uiable.com/components/tabs" title="Tabs"><kbd>Tabs</kbd></a>
  <a href="https://uiable.com/components/sidebar" title="Sidebar"><kbd>Sidebar</kbd></a>
</div>

### Layout & Interaction

<div>
  <a href="https://uiable.com/components/accordion" title="Accordion"><kbd>Accordion</kbd></a>
  <a href="https://uiable.com/components/collapsible" title="Collapsible"><kbd>Collapsible</kbd></a>
  <a href="https://uiable.com/components/context-menu" title="Context Menu"><kbd>Context Menu</kbd></a>
  <a href="https://uiable.com/components/item" title="Item"><kbd>Item</kbd></a>
  <a href="https://uiable.com/components/popover" title="Popover"><kbd>Popover</kbd></a>
</div>

### Other Components

<div>
  <a href="https://uiable.com/components/aspect-ratio" title="Aspect Ratio"><kbd>Aspect Ratio</kbd></a>
  <a href="https://uiable.com/components/attachment" title="Attachment"><kbd>Attachment</kbd></a>
  <a href="https://uiable.com/components/bubble" title="Bubble"><kbd>Bubble</kbd></a>
  <a href="https://uiable.com/components/command" title="Command"><kbd>Command</kbd></a>
  <a href="https://uiable.com/components/empty" title="Empty"><kbd>Empty</kbd></a>
  <a href="https://uiable.com/components/field" title="Field"><kbd>Field</kbd></a>
  <a href="https://uiable.com/components/marker" title="Marker"><kbd>Marker</kbd></a>
  <a href="https://uiable.com/components/message" title="Message"><kbd>Message</kbd></a>
  <a href="https://uiable.com/components/message-scroller" title="Message Scroller"><kbd>Message Scroller</kbd></a>
  <a href="https://uiable.com/components/resizable" title="Resizable"><kbd>Resizable</kbd></a>
  <a href="https://uiable.com/components/scroll-area" title="Scroll Area"><kbd>Scroll Area</kbd></a>
  <a href="https://uiable.com/components/separator" title="Separator"><kbd>Separator</kbd></a>
  <a href="https://uiable.com/components/typography" title="Typography"><kbd>Typography</kbd></a>
</div>

---

## Blocks

Pre-built page sections ready to drop into your project.

### Contact

<div>
  <a href="https://uiable.com/preview/contact/contact-1/contact-1" title="Contact 1"><kbd>Contact 1</kbd></a>
</div>

### Content

<div>
  <a href="https://uiable.com/preview/content/content-1/content-1" title="Content 1"><kbd>Content 1</kbd></a>
</div>

### CTA

<div>
  <a href="https://uiable.com/preview/cta/cta-1/cta-1" title="Call To Action 1"><kbd>Call To Action 1</kbd></a>
  <a href="https://uiable.com/preview/cta/cta-2/cta-2" title="Call To Action 2"><kbd>Call To Action 2</kbd></a>
</div>

### Faq

### Feature

<div>
  <a href="https://uiable.com/preview/feature/feature-1/feature-1" title="Feature 1"><kbd>Feature 1</kbd></a>
  <a href="https://uiable.com/preview/feature/feature-2/feature-2" title="Feature 2"><kbd>Feature 2</kbd></a>
</div>

### Footer

<div>
  <a href="https://uiable.com/preview/footer/footer-7/footer-7" title="Footer 7"><kbd>Footer 7</kbd></a>
  <a href="https://uiable.com/preview/footer/footer-3/footer-3" title="Footer 3"><kbd>Footer 3</kbd></a>
</div>

### Gallery

<div>
  <a href="https://uiable.com/preview/gallery/gallery-2/gallery-2" title="Gallery 2"><kbd>Gallery 2</kbd></a>
  <a href="https://uiable.com/preview/gallery/gallery-4/gallery-4" title="Gallery 4"><kbd>Gallery 4</kbd></a>
</div>

### Hero

### Portfolio

<div>
  <a href="https://uiable.com/preview/portfolio/portfolio-5/portfolio-5" title="Portfolio 5"><kbd>Portfolio 5</kbd></a>
  <a href="https://uiable.com/preview/portfolio/portfolio-4/portfolio-4" title="Portfolio 4"><kbd>Portfolio 4</kbd></a>
</div>

### Pricing

<div>
  <a href="https://uiable.com/preview/pricing/pricing-2/pricing-2" title="Pricing 2"><kbd>Pricing 2</kbd></a>
</div>

### Process

<div>
  <a href="https://uiable.com/preview/process/process-6/process-6" title="Process 6"><kbd>Process 6</kbd></a>
  <a href="https://uiable.com/preview/process/process-1/process-1" title="Process 1"><kbd>Process 1</kbd></a>
</div>

### Statistics

<div>
  <a href="https://uiable.com/preview/statistics/statistics-1/statistics-1" title="Statistics 1"><kbd>Statistics 1</kbd></a>
</div>

### Team

### Testimonial

<div>
  <a href="https://uiable.com/preview/testimonial/testimonial-1/testimonial-1" title="Testimonial 1"><kbd>Testimonial 1</kbd></a>
</div>

### Landing

<div>
  <a href="https://uiable.com/blocks/landing" title="Landing Header"><kbd>Landing Header</kbd></a>
  <a href="https://uiable.com/blocks/landing" title="Hero"><kbd>Hero</kbd></a>
  <a href="https://uiable.com/blocks/landing" title="Component 1"><kbd>Component 1</kbd></a>
  <a href="https://uiable.com/blocks/landing" title="Component 2"><kbd>Component 2</kbd></a>
  <a href="https://uiable.com/blocks/landing" title="Feature"><kbd>Feature</kbd></a>
  <a href="https://uiable.com/blocks/landing" title="Contact"><kbd>Contact</kbd></a>
  <a href="https://uiable.com/blocks/landing" title="Footer"><kbd>Footer</kbd></a>
</div>

<br />

> Components are added based on practical frontend needs, not trend-driven requests. If you need something that isn't here, open a discussion or a PR.

---

## License

You can use, modify, and distribute UIAble freely in personal and commercial projects. No attribution required, though it's always appreciated.

See the full [LICENSE](https://github.com/codedthemes/uiable/blob/master/LICENSE) file for details.

---

## Acknowledgements

UIAble stands on the shoulders of great open-source work:

- [shadcn/ui](https://ui.shadcn.com) — for the copy-paste component model
- [Tailwind CSS](https://tailwindcss.com) — for the utility-first foundation
- [Base UI](https://base-ui.com) — for unstyled accessible primitives
- [Lucide](https://lucide.dev) — for the icon set

---

_UIAble is intentionally not trying to feel like a product. It's trying to feel like something you quietly copy into your project — and forget about, because it just works._

uiable

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README