Button

UIAble Button is a customizable button component built using Shadcn UI and Base UI concepts. It uses @base-ui/react/button for handling behavior like focus, keyboard actions, and accessibility.

Unlike traditional UI libraries, this button is not locked inside a package. You get the actual code inside your project, so you can edit it, customize it, or extend it however you want.

It is styled using Tailwind CSS and uses CVA (class-variance-authority) to manage different styles like size and variants in a clean way.

UIAble Button follows the Base UI pattern, where logic and styling are handled separately. It already handles things like keyboard navigation, focus states and ARIA attributes for accessibility. You don’t need to handle these manually, so you can focus more on UI and design.

At the same time, you still have full control because the code lives inside your project. There is no dependency lock-in, so you can easily customize behavior, styles, or structure based on your needs.

It also works smoothly with Tailwind CSS and CVA (class-variance-authority). This gives you a clean and type-safe way to manage sizes and variants, instead of writing messy conditional strings. As your project grows, it helps maintain a consistent design system, so your sm, md, and lg buttons stay consistent across all screen sizes.

UIAble Button is easy to use with other components.

It supports the asChild pattern, so you can use it with components like Next.js `Link` or custom navigation elements without breaking the DOM hierarchy.

You can use it inside layouts like: