# 14 shadcn Alternatives in 2026: Price, Mobile and MCP
> 14 shadcn alternatives checked in October 2026: free and paid UI libraries by license, price, mobile behavior and MCP support, with a pick per use case.
- Author: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Published: Oct 9, 2026
- Category: [Comparisons and alternatives](https://wingo-ui.com/blog/category/comparisons)
- Reading time: 19 min
- Canonical: https://wingo-ui.com/blog/shadcn-alternatives
## TL;DR
The best shadcn alternative depends on which part of shadcn/ui you want to replace. To keep owning the source, pick coss ui (free, on Base UI), Magic UI or Aceternity UI for animated marketing pages, or Wingo UI for mobile-first app components; to install a package instead, pick Mantine, MUI, Chakra UI or HeroUI; for a design system of your own, start from Base UI or React Aria. Most of these libraries leave the phone layout to you, so check what each one does on a 390px screen before you switch.
Picking among shadcn alternatives usually starts with how each library installs and how it looks. The questions that decide a project come later: what happens to the files you copied when upstream fixes a bug, whether the select you ship opens as something usable on a 390px phone, and whether Claude Code or Cursor can look up real props instead of guessing them. This guide answers those questions for 14 libraries, with prices, licenses and features checked in October 2026 and linked to the pages we read.
We build Wingo UI, one of the paid options below, so read this as a vendor's view with sources. It covers open source shadcn alternatives and paid ones, and it says plainly where another library is the better pick. More head to head comparisons live under [Comparisons and alternatives](https://wingo-ui.com/blog/category/comparisons).
## What is the best alternative to shadcn UI?
There is no single best alternative to shadcn UI, because shadcn/ui is three things at once: a way to distribute code (a CLI that copies source files into your project), a set of primitives underneath (Base UI, Radix or React Aria), and a visual style. Decide which of the three you want to replace and the shortlist gets short:
- **Keep the model, change the components.** coss ui for free MIT components on Base UI, Magic UI or Aceternity UI for animated landing pages, Untitled UI React for a kit that matches the Untitled UI Figma file, Wingo UI for mobile-first app components with an MCP server and updates that merge into files you edited.
- **Leave the model, install a package.** Mantine for a free set with forms, dates and charts, MUI when you need the MUI X data grid and pickers, Chakra UI for style props, HeroUI for React Aria and Tailwind CSS v4 in an npm package, Ant Design for dense enterprise back offices.
- **Keep the primitives, drop the look.** Base UI, React Aria Components or Radix Primitives, styled by you.
- **Step outside React.** daisyUI, which is a set of Tailwind CSS class names that works with any framework.
If none of those reasons applies to you, the best option may be staying where you are, which the section near the end covers.
## What changed in shadcn/ui in 2026?
The biggest change: since July 2026, new shadcn/ui projects start on Base UI instead of Radix. The [July 2026 changelog entry](https://ui.shadcn.com/docs/changelog/2026-07-base-ui-default) made Base UI the default for `npx shadcn init` and for the docs, kept Radix fully supported behind `npx shadcn init -b radix`, and noted that projects created on shadcn/create were already picking Base UI over Radix 2 to 1. The same month, [React Aria became a third base](https://ui.shadcn.com/docs/changelog/2026-07-react-aria) (`--base aria`).
Other changes that matter when you compare:
- The [Drawer](https://ui.shadcn.com/docs/components/drawer) in Base UI projects now uses Base UI's drawer instead of Vaul. The Radix version still uses Vaul.
- June 2026 added components for chat interfaces, July 2026 a Toast built on Base UI, and September 2026 moved `cn` into [its own package](https://ui.shadcn.com/docs/changelog/2026-09-cn), so components import it from `cn` instead of `@/lib/utils`. What the new Toast means next to Sonner is in our [Sonner alternatives comparison](https://wingo-ui.com/blog/sonner-alternative-react-toast).
- On the agent side there is an [MCP server](https://ui.shadcn.com/docs/mcp) that browses, searches and installs from every registry in `components.json`, and a [skill](https://ui.shadcn.com/docs/skills) (`npx skills add shadcn/ui`) that reads your project configuration before the agent writes code.
Two consequences follow. A "Radix plus Tailwind" description of shadcn/ui is out of date, and a registry written for Radix needs care in a new Base UI project. And the copy-the-source model has become a platform: registries from other vendors install through the same `shadcn add` command, so trying an alternative no longer means learning a new tool.
## How do the shadcn alternatives compare?
The tables below are the short answer, checked in October 2026. "Mobile" lists only what each library's docs show for phones beyond responsive layout, and "Agents" what a coding agent can use. Prices are list prices on the day we checked; several vendors showed a discount from a higher price.
### Libraries that put the source in your project
| Library | Model and base | License | Price | Mobile | Agents |
| --- | --- | --- | --- | --- | --- |
| [shadcn/ui](https://ui.shadcn.com/docs/changelog) | CLI copies source; Base UI (default), Radix or React Aria | MIT | Free | Drawer, a Dialog plus Drawer recipe, Sidebar with its own mobile state | MCP server, skill, llms.txt |
| [coss ui](https://coss.com/ui/llms.txt) | shadcn registry (`@coss`); Base UI | MIT | Free | Drawer with swipe, snap points and nesting | llms.txt, agent skills |
| [Magic UI](https://pro.magicui.design) | shadcn registry (`@magicui`); Motion | MIT (free), paid license (Pro) | Free; Pro $199 one-time | Landing page effects; no sheet, popover or menu in the catalog | [MCP server](https://magicui.design/docs/mcp), llms.txt |
| [Aceternity UI](https://ui.aceternity.com/pricing) | shadcn registry (`@aceternity`); Motion | [Aceternity License](https://ui.aceternity.com/licence) | Free; $169 a year or $199 lifetime; Team $1,590 for 10 people | Effects and blocks; some blocks document a mobile menu | llms.txt; prompts for v0 and Lovable on paid plans |
| [Untitled UI React](https://www.untitledui.com/react) | Own CLI or npm; React Aria, Tailwind CSS v4 | MIT (free base), PRO license | Free; PRO from $349 one-time for one user | Drawers and modals are PRO | MCP server, llms.txt |
| [Wingo UI](https://wingo-ui.com/docs/installation) | Own CLI or shadcn registry (`@wingo-ui`); Radix, vaul, Motion | Per-developer license; 75 items free | Free; Pro $8 a month, $80 a year or $150 lifetime | Popover, select, menus and dialog open as bottom sheets below 768px; 44px targets on touch; table rows become cards | [MCP server](https://wingo-ui.com/docs/mcp), rules for 5 agents, llms.txt, update checks |
### Packages and primitives
| Library | Model and base | License | Price | Mobile | Agents |
| --- | --- | --- | --- | --- | --- |
| [Mantine 9](https://mantine.dev/guides/llms/) | npm; own CSS, no Tailwind | MIT | Free | Modal goes full screen on small screens with `use-media-query` (a docs recipe) | MCP server, skills, llms.txt |
| [MUI (Material UI 9)](https://mui.com/pricing/) | npm; Emotion | MIT core | Free; MUI X Pro $299 or Premium $599 per developer a year | SwipeableDrawer; Dialog goes full screen with `useMediaQuery` (a docs recipe) | [MCP server](https://mui.com/material-ui/getting-started/mcp/), llms.txt |
| [Chakra UI 3](https://www.chakra-ui.com/docs/get-started/ai/mcp-server) | npm; Ark UI, Emotion | MIT | Free; [Chakra UI Pro](https://pro.chakra-ui.com/pricing) blocks $299 one-time | Drawer placement takes breakpoints, such as bottom on phones and end from `md` | MCP server, llms.txt |
| [HeroUI 3](https://www.heroui.com/llms.txt) | npm; React Aria, Tailwind CSS v4 | MIT | Free; [HeroUI Pro](https://heroui.pro/pricing) sold separately | Modal placement `auto` sits at the bottom on mobile and centered on desktop; a separate React Native library | MCP server, agent skills, llms.txt |
| [Ant Design 6](https://ant.design/docs/react/mcp) | npm; own design language | MIT | Free | Built for enterprise back offices; phones get a separate library, antd-mobile | MCP server (`antd mcp`), llms.txt |
| [daisyUI 5](https://daisyui.com/components/modal/) | Tailwind CSS plugin, class names only | MIT | Free; [Blueprint MCP](https://daisyui.com/blueprint/) $22 a month or $600 lifetime | `modal-bottom sm:modal-middle` puts a modal at the bottom on phones; Dock for bottom navigation | llms.txt, skill; Blueprint MCP (paid) |
| [Konsta UI 5](https://konstaui.com/) | npm for React, Vue and Svelte; Tailwind CSS | MIT | Free | Mobile only: iOS and Material sheets, tab bars and toolbars | None found |
| [Base UI 1.8](https://base-ui.com/llms.txt) | npm; unstyled | MIT | Free | Drawer with swipe to dismiss | llms.txt |
| [React Aria Components](https://react-aria.adobe.com/llms.txt) | npm; unstyled | Apache-2.0 | Free | Press and hover events normalized for touch | MCP server, agent skills, llms.txt |
Two libraries are missing from the tables on purpose. Radix Primitives is still maintained and still the base of many registries, ours included; it appears in the section on headless primitives. Tailwind Plus, from the Tailwind CSS team, sells its components, templates and the Catalyst UI kit as a [one-time purchase with lifetime access](https://tailwindcss.com/blog/tailwind-plus), but its product page sent us to a sign-in form when we checked, so we left it out rather than print prices we could not see.
## Which alternatives keep the shadcn model?
coss ui, Magic UI, Aceternity UI, Untitled UI React and Wingo UI all put the source in your repository, and all but Untitled UI install through the shadcn CLI. They differ in what they cover and in what happens after the copy.
**coss ui** is the closest thing to shadcn/ui with a different design. Its registry components are MIT licensed, built on Base UI from the start, cover the app basics from Accordion and Dialog to Toast and Tooltip, and come with a migration guide from shadcn/ui and Radix. Its [repository](https://github.com/cosscom/coss) also keeps Origin UI, the Radix-based registry coss ui grew out of, as a legacy snapshot with limited support. If you liked shadcn/ui and want more components on the new default base for free, start here.
**Magic UI and Aceternity UI** are effect libraries for marketing pages: animated backgrounds, marquees, hero sections and full landing templates. They sit next to shadcn/ui more than they replace it, since neither covers the forms, menus and overlays an app needs. Magic UI's free components are MIT; Aceternity uses its own license, which says you cannot redistribute the source files, so read it before you publish them in a public repository.
**Untitled UI React** is the code side of the Untitled UI Figma kit, installed with its own CLI (`npx untitledui@latest add`) or from npm. The free base is MIT; the PRO tier is a one-time purchase per seat tier and adds hundreds of components, dashboards and page examples, drawers, modals and command menus included. It is a natural pick when your designers already work from the Untitled UI Figma file.
**Wingo UI** is ours. Release 1.7.0 has 326 items: 218 components, 72 blocks and page templates, 17 hooks and 19 helpers, of which 75 are free. Every component is built for apps people open on phones, as the mobile section below shows. Every visual aspect is a prop with a default, and the CLI merges new releases into files you have edited. The weak spots: it is younger and has a much smaller community than shadcn/ui, it is React only, it is built on Radix (so a Base UI project would carry two primitive libraries), and most items need a paid plan.
## Which alternatives ship as an npm package?
Mantine, MUI, Chakra UI, HeroUI and Ant Design. You upgrade with `npm update` instead of merging files, and you customize through the library's theme and style APIs instead of editing the component source. That trade is right for many teams: someone else fixes the focus trap in the date picker, and you never see the file.
**Mantine 9** is free and MIT across the board: components, hooks, a form library, dates and charts. It does not use Tailwind CSS; its own FAQ has a page on the limits of mixing in third-party styling. Its [AI guide](https://mantine.dev/guides/llms/) documents llms.txt, skills and an MCP server whose `get_item_props` tool returns a component's props or a hook's signature.
**MUI** is where you go for heavy data screens. The core Material UI library is MIT and free; the MUI X Data Grid, date range pickers, charts and tree view add advanced features in paid plans, listed at $299 (Pro) and $599 (Premium) per developer per year in October 2026. The default look is Material Design, which is a feature or a problem depending on your product.
**Chakra UI 3** rebuilt the library on Ark UI and kept its style props. Its responsive object syntax reaches component props too: the Drawer docs show `placement={{ mdDown: "bottom", md: "end" }}`, which opens a bottom drawer on phones and a side panel from `md`. Chakra UI Pro sells blocks on top, from $299 one-time.
**HeroUI 3** is the closest npm package to the shadcn stack: React Aria Components underneath, Tailwind CSS v4 for styling, MIT. Its Modal placement defaults to `auto`, which sits at the bottom of the screen below the `sm` breakpoint and centered above it, and its [button styles](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/button.css) make the default size 40px tall on phones and 36px from `md` up. A separate HeroUI Native library covers React Native, and a paid HeroUI Pro adds components such as a command palette and a data grid.
**Ant Design 6** is built for enterprise back offices: dense tables, forms and admin layouts. Phones get a separate library, antd-mobile, so an app that serves both maintains two sets of components.
## Should you use headless primitives instead?
Only if you are building your own design system and can own every style, state and animation. Headless libraries give you behavior and accessibility; everything you see is your code.
- **Base UI** reached [v1.0.0 on December 11, 2025](https://base-ui.com/llms.txt) and is now the default base under shadcn/ui. Its Drawer handles swipe to dismiss, the job shadcn/ui used Vaul for.
- **React Aria Components** from Adobe has the most thorough interaction layer we know of. `usePress` handles mouse, touch, keyboard and screen readers through one API, and `useHover` [ignores the emulated mouse events that touch devices fire](https://react-aria.adobe.com/useHover.md), which is the cause of hover styles that stick after a tap.
- **Radix Primitives** is still maintained and still under most of the shadcn ecosystem, including Wingo UI.
Picking a headless library also picks the base for everything you add later, since a registry built for one base may not drop cleanly into another.
## Which shadcn alternatives work best on mobile?
Most of them leave the phone to you. They give you a drawer and a media query hook, and you wire the swap from popover or dialog to sheet one component at a time. Sorted by how much of that work the library does, from least to most:
1. **Responsive CSS only.** Magic UI and Aceternity UI (effects for landing pages) and Ant Design (a separate mobile library).
2. **A recipe you copy per component.** shadcn/ui, MUI and Mantine document a pattern that reads a media query and renders a different component or a full-screen variant.
3. **A placement that changes by breakpoint.** Chakra UI's drawer placement, daisyUI's `modal-bottom sm:modal-middle` and HeroUI's `auto` placement move the panel to the bottom of the screen on phones. Whether you can drag it away depends on the component.
4. **Built into each component.** Konsta UI, for mobile-only apps with an iOS or Material look, and Wingo UI, where the [Popover](https://wingo-ui.com/components/popover), [Select](https://wingo-ui.com/components/select), Dropdown Menu, [Dialog](https://wingo-ui.com/components/dialog) and date pickers open as draggable bottom sheets below 768px through a `responsive` prop that defaults to `true`.
Level 2 looks like this. It is an abridged copy of the responsive example in the shadcn/ui Drawer docs, where the form is shared as its own component and the overlay shell is written twice:
```tsx
const isDesktop = useMediaQuery("(min-width: 768px)");
if (isDesktop) {
return (
);
}
return (
{/* the same trigger and header again, then */}
);
```
That is fine for one dialog. It becomes a project when every popover, select, dropdown and date picker needs the same treatment, each with its shell written twice and each reading a hook that returns `false` on the server. Our [mobile-first React components guide](https://wingo-ui.com/blog/mobile-first-react-components) covers why that hook value is harmless for overlays and harmful for content, along with the other rules for phones.
The level 4 version of the same idea is one component. The free [Drawer](https://wingo-ui.com/components/drawer) is a draggable bottom sheet on phones, and its `desktop` prop decides what it becomes from 768px: the same sheet (`"sheet"`, the default), a side panel (`"side"`) or a centered dialog (`"dialog"`).
```tsx
"use client";
import { SlidersHorizontal } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Drawer, DrawerClose } from "@/components/ui/drawer";
export function ListingFilters({ results }: { results: number }) {
return (
}>
Filters
}
title="Filters"
description="New York ยท 1,240 listings"
desktop="dialog"
closeLabel="Close filters"
footer={
}
>
Price, condition and categories
);
}
```
> Live demo (Drawer): Tap Filters: on a phone the sheet slides up and you can drag it down to close; on a wide screen the same component opens a centered dialog. Try it at [Drawer](https://wingo-ui.com/components/drawer) and install it with `npx wingo-ui@latest add drawer`.
On a phone the sheet has a drag handle and no close button; in the desktop dialog a close button appears in the corner, and `closeLabel` is its accessible name.
Touch targets follow the same split. HeroUI v3 makes its buttons taller below `md`, as noted above. Wingo UI's [Button](https://wingo-ui.com/components/button) grows its medium size from 40px to 44px on coarse pointers and gives the small size a 44px hit area without changing how it looks. For the phone question alone, our [best React component library for mobile](https://wingo-ui.com/blog/best-react-component-library-for-mobile) comparison checks nine libraries at 390px, Ionic React and antd-mobile included, on sheets, touch targets, safe areas and gestures.
## Which shadcn alternatives work best with coding agents?
In October 2026 most of them have an MCP server, so the useful question is what the server can do. We see three kinds:
- **Documentation servers** answer questions about components, props and examples, and npm still installs the package. MUI, Mantine (`search_docs`, `get_item_props`, `get_api`), Chakra UI (`list_components`, `get_component_props`, `get_theme`), Ant Design (eight tools behind `antd mcp`, `antd_changelog` among them), React Aria and HeroUI work this way.
- **Install servers** find items and put their source into your project. The shadcn MCP server does it through the shadcn CLI for any registry in `components.json`, and Untitled UI's server can browse, search and install its components. Magic UI's gives the agent direct access to its components.
- **Servers that also check for updates.** Ours answers searches and returns props with defaults, the design rules and the theme tokens without an account, and sends the source to an API key (a free account for free items, Pro for the rest). Its `check_updates` tool compares the versions in your `wingo-ui.json` with the latest release, so the agent hears about fixes before it edits a file that has one waiting.
Setting each one up takes one line:
```bash
# documentation servers: the agent reads props and examples, npm installs the package
claude mcp add mantine -- npx -y @mantine/mcp-server
claude mcp add chakra-ui -- npx -y @chakra-ui/react-mcp
# an install server for every registry in components.json
npx shadcn@latest mcp init --client claude
# the Wingo UI MCP server plus a rules file for the agent
npx wingo-ui@latest agents install claude
```
The server matters more for libraries whose source you own. With a package, an agent that guesses a prop gets a type error. With copied source, the agent can edit the component itself, so it needs the real API and the rules behind it. Our [guide to component library MCP servers](https://wingo-ui.com/blog/component-library-mcp-guide) covers the tools, the rules file and the setup for Claude Code, Cursor and Codex. If you are choosing between a hosted generator and an agent in your repository, our [v0 vs Claude Code comparison](https://wingo-ui.com/blog/v0-vs-claude-code-for-ui) weighs code ownership, design consistency and cost across sign-in, pricing and settings screens.
## How do you update components you copied?
With a package, you run `npm update` and read the changelog. With copied source, the merge is yours, and libraries differ in how much they help.
The shadcn CLI can preview: `npx shadcn@latest add dialog --dry-run` lists what would change and `--diff` shows the difference for a file. Bringing an upstream fix into a file you have edited is then a manual merge, or a job for your agent with the shadcn skill loaded. Every registry you install through the shadcn CLI behaves the same way. Our guide to [updating shadcn components without losing edits](https://wingo-ui.com/blog/update-shadcn-components-without-losing-edits) turns that manual merge into a git 3-way merge.
Wingo UI's CLI records the version of everything it installs in `wingo-ui.json` and keeps the installed copy in `.wingo-ui/base/`, which lets it run a three-way merge, the same idea as `git merge`:
```bash
npx wingo-ui@latest outdated # installed vs latest, and which files you edited
npx wingo-ui@latest diff drawer --base # what you changed since installing
npx wingo-ui@latest update drawer # untouched files are replaced, your edits are kept
```
When upstream and you changed the same lines, the file gets conflict markers and you choose, or you settle every conflict with `--theirs` or `--ours`. The [updates docs](https://wingo-ui.com/docs/updates) cover the details. One caveat: files you install through the shadcn CLI from our registry carry no version record, so `wingo-ui update` cannot merge into them later.
## Which shadcn alternatives include a data table?
MUI, Ant Design and Wingo UI ship a full data table; shadcn/ui gives you a guide instead. Its [Data Table page](https://ui.shadcn.com/docs/components/data-table) explains that one data table component would lose the flexibility of headless UI, so it walks you through building your own on the Table component and TanStack Table v9. That is a good fit if your tables are all different. If you need the same admin table on twenty screens, the guide becomes code you maintain. Our [TanStack Table v9 data table tutorial](https://wingo-ui.com/blog/tanstack-table-v9-data-table) builds that code with filters, bulk actions and server pagination, and compares it with the ready-made tables.
The alternatives split three ways. MUI's X Data Grid has a free MIT version and adds its advanced features in the paid plans. Ant Design's Table has sorting, filters and pagination built in, and the other packages give you a styled table to build on. Wingo UI's [Data Table](https://wingo-ui.com/components/data-table) is a Pro component on TanStack Table v9 with search, filters, sorting, bulk actions, pinning, resizing and virtualization, and below 768px each row becomes a card instead of a table that scrolls sideways:
```tsx
"use client";
import { DataTable, createColumns } from "@/components/ui/data-table";
type Order = { id: string; customer: string; city: string; status: string; total: number };
const col = createColumns();
const columns = col([
col.accessor("customer", { header: "Customer", filter: "text", mobile: "title" }),
col.accessor("city", { header: "City", filter: "multi-select", mobile: "subtitle" }),
col.accessor("status", {
header: "Status",
type: "badge",
badge: { Paid: { tone: "success" }, Refunded: { tone: "warning" }, Failed: { tone: "danger" } },
filter: "multi-select",
}),
col.accessor("total", { header: "Total", type: "currency", footer: "sum" }),
]);
export function Orders({ orders }: { orders: Order[] }) {
return (
);
}
```
> Live demo (Data Table): Search for a client, toggle the Overdue chip, then sort or filter from the toolbar; on a phone each row becomes a card with a Load more button. Try it at [Data Table](https://wingo-ui.com/components/data-table) and install it with `npx wingo-ui@latest add data-table`.
The `mobile` key on a column decides where its value goes on the phone card: `"title"`, `"subtitle"`, `"meta"`, `"field"` or `"hidden"`. Rows need a unique `id` (or pass `getRowId`), because selection uses it. Switch `mobileLayout` to `"scroll"` when a table has to stay a table.
## Which shadcn UI alternative for React fits your project?
Match the library to the job. These are our picks, including the many cases where the answer is not ours:
- **Enterprise admin with heavy grids and date ranges:** MUI with MUI X, the deepest set of data components in this list.
- **Internal tools with complex forms, without Tailwind:** Mantine. Free, MIT, with forms and dates built in.
- **A design system of your own:** Base UI or React Aria Components. React Aria if touch and screen reader behavior has to be exact.
- **A free shadcn alternative on the new default base:** coss ui.
- **An npm package with the shadcn look and stack:** HeroUI 3.
- **Animated marketing pages:** Magic UI or Aceternity UI, next to whatever you use for the app.
- **Server-rendered pages with little JavaScript, or a stack beyond React:** daisyUI.
- **A mobile-only web app, or one wrapped in Capacitor, with a native iOS or Material look:** Konsta UI.
- **A product that people use on phones and desktops, built with coding agents, where you own the source and still want updates:** Wingo UI.
## When should you stay on shadcn/ui?
Stay when your app is used mostly on desktops, your team is happy to write its own responsive wrappers, and the biggest ecosystem matters more to you than any one feature. shadcn/ui is free and MIT licensed, its [GitHub repository](https://github.com/shadcn-ui/ui) had about 125,000 stars on October 8, 2026, it supports three bases, and its CLI installs from a whole directory of community registries. Switching has a cost: every call site that uses a component's API changes, and a new library brings its own conventions for tokens, sizes and states.
You also do not have to choose. Because registries share one CLI, the realistic path for most teams is shadcn/ui as the base plus one or two registries for what it lacks.
## How do you switch without a rewrite?
Replace one component at a time, starting with the ones that hurt most, and keep both libraries in the project while you do.
Three practical points for a move from shadcn/ui to Wingo UI, most of which apply to any registry:
1. **File names collide.** Both libraries write `components/ui/button.tsx`, `dialog.tsx` and `drawer.tsx`. Our CLI keeps an existing file that differs and tells you to rerun with `--overwrite`, so commit first and swap deliberately.
2. **Call sites change.** shadcn/ui's Button uses `variant="destructive"` and `variant="secondary"`; ours separates the role from the color, so those become `tone="danger"` and `variant="soft"`.
3. **Pick the right CLI for a Base UI project.** Free items install from their URL with `npx shadcn@latest add https://wingo-ui.com/r/button.json`, and Pro items through the `@wingo-ui` registry in `components.json`. But shadcn projects created with a Base UI style rewrite `asChild`, which our components rely on, so in those projects use `npx wingo-ui@latest add` instead, as the [installation docs](https://wingo-ui.com/docs/installation) explain.
To keep the new components close to your current look while you migrate, set app-wide defaults once instead of passing props everywhere. Our Button and Input default to `radius="md"`, which gives the medium size 10px corners; if your current controls use 8px, `"sm"` matches them:
```tsx
import { UIProvider } from "@/lib/ui-config";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`UIProvider` is a client component, so the root layout can stay a server component. Explicit props still win over these defaults, and the defaults win over the component's own. The Button below runs with the soft variant and a full radius set through props, so you can compare it with your current buttons in both themes.
> Live demo (Button): Press the button: it dips on a quick spring and settles back; Tab to it for the focus ring, then switch the theme to compare light and dark. Try it at [Button](https://wingo-ui.com/components/button) and install it with `npx wingo-ui@latest add button`.
## Where should you start?
Pick the one component that hurts most on a phone and try an alternative for that component alone. If it is an overlay, install the free Drawer with `npx wingo-ui@latest add drawer` (no account needed; it brings the Button and the media query hook along), put it behind one trigger people use on phones, and open it on your own device. The Data Table and the rest of the catalog are part of [Wingo UI Pro](https://wingo-ui.com/pricing), and the [MCP server](https://wingo-ui.com/docs/mcp) answers questions about every item without an account, so your agent can read the props before you decide.
## Components in this post
- [Button](https://wingo-ui.com/components/button) (Free): The button every screen starts with: five variants, six tones, three sizes plus icon sizes, and a loading state that never jumps. Install: `npx wingo-ui@latest add button`
- [Drawer](https://wingo-ui.com/components/drawer) (Free): The library's bottom sheet on vaul: drag to dismiss, snap points, nesting, and a side panel or dialog on desktop. Install: `npx wingo-ui@latest add drawer`
- [Data Table](https://wingo-ui.com/components/data-table) (Pro): The admin table on TanStack Table v9: search, filters, sorting, bulk actions, pinning, resizing, virtualization and cards on phones. Install: `npx wingo-ui@latest add data-table`
## FAQ
### What is the best free alternative to shadcn/ui?
If you want to keep owning the source, coss ui is the closest match: MIT licensed, built on Base UI and installed through the shadcn CLI. If you would rather install a package, Mantine is MIT licensed, free and covers forms, dates and charts as well as the basic components.
### Is shadcn/ui still built on Radix?
Not by default. Since July 2026, npx shadcn init starts new projects on Base UI, Radix stays fully supported with the -b radix flag, and React Aria is available as a third base with --base aria.
### Which shadcn alternative works best on mobile?
Konsta UI if you want an iOS or Material look for a mobile-only web app, and Wingo UI if the same app runs on desktops and phones, because its popover, select, menus and dialog open as draggable bottom sheets below 768px by default. HeroUI, Chakra UI and daisyUI can move a modal or drawer to the bottom of the screen on phones; shadcn/ui, MUI and Mantine document a recipe you wire per component.
### Can I use a shadcn alternative alongside shadcn/ui?
Yes. Registries such as coss ui, Magic UI, Aceternity UI and Wingo UI install through the same shadcn add command, so you can replace one component at a time. Watch for files with the same name, such as components/ui/button.tsx, and commit before each swap.
### Do shadcn alternatives work with Claude Code and Cursor?
Most do. As of October 2026 shadcn/ui, MUI, Mantine, Chakra UI, HeroUI, Ant Design, React Aria, Magic UI, Untitled UI and Wingo UI publish MCP servers, and nearly all publish llms.txt. The servers differ: some answer documentation questions, some install source files, and Wingo UI's also checks your installed versions for updates.
---
Source: https://wingo-ui.com/blog/shadcn-alternatives