# Wingo UI vs shadcn/ui: Same Model, Different Scope

> Wingo UI vs shadcn/ui, checked in October 2026: the same copy-the-source model compared on license, price, mobile behavior, updates and AI agent tooling.

- Author: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Published: Oct 13, 2026
- Category: [Comparisons and alternatives](https://wingo-ui.com/blog/category/comparisons)
- Reading time: 9 min
- Canonical: https://wingo-ui.com/blog/wingo-ui-vs-shadcn

## TL;DR

shadcn/ui and Wingo UI both copy TypeScript source into your project, and Wingo UI installs through its own CLI or as the @wingo-ui registry in components.json. shadcn/ui is free, MIT licensed, runs on Base UI, Radix or React Aria and has a much larger ecosystem; Wingo UI is a paid per-developer library (75 of 342 items free) that adds bottom sheets on phones, blocks and page templates, and a CLI that 3-way merges updates into files you edited. Start with shadcn/ui and add Wingo UI for the pieces it does not cover.

If you already use shadcn/ui, the Wingo UI vs shadcn question is narrower than it looks. Both put TypeScript source into `components/ui`, both style it with Tailwind CSS and CSS variables, and both install through a CLI. Wingo UI even installs through the shadcn CLI as a namespaced registry. So the choice is about scope: what each library covers, what it does on a phone, what happens when upstream ships a fix, and what it costs.

We build Wingo UI, so this is a vendor's comparison. Every shadcn/ui fact below comes from [ui.shadcn.com](https://ui.shadcn.com/docs/changelog) and was checked on October 13, 2026; every Wingo UI number comes from our registry at release 1.8.0. Where shadcn/ui alone is the better pick, we say so. For the wider field, our [shadcn alternatives guide](https://wingo-ui.com/blog/shadcn-alternatives) compares 14 libraries.

## What do Wingo UI and shadcn/ui have in common?

The distribution model. Neither is an npm package you import from `node_modules`. A CLI fetches the component files and writes them into your project, and from then on the code is yours to read and edit. Both target React 19 and Tailwind CSS v4 and read their colors from CSS variables in your global stylesheet.

Wingo UI is a shadcn compatible component library, built to sit inside a shadcn/ui project. The [installation docs](https://wingo-ui.com/docs/installation) cover three ways in:

```bash
# the Wingo UI CLI: records versions so updates can merge later
npx wingo-ui@latest add drawer

# the shadcn CLI, free items by URL
npx shadcn@latest add https://wingo-ui.com/r/button.json

# the shadcn CLI, Pro items through the @wingo-ui registry in components.json
npx shadcn@latest add @wingo-ui/calendar
```

The third line needs a registry entry with your API key:

```json
{
  "registries": {
    "@wingo-ui": {
      "url": "https://wingo-ui.com/r/{name}.json",
      "headers": { "Authorization": "Bearer ${WINGO_UI_API_KEY}" }
    }
  }
}
```

One caveat matters more since July 2026. shadcn/ui [made Base UI the default](https://ui.shadcn.com/docs/changelog/2026-07-base-ui-default) for `npx shadcn init`, and projects created with a Base UI style rewrite `asChild`. Wingo UI's components are built on Radix and rely on `asChild`, so in a Base UI style project install them with `npx wingo-ui@latest add` instead of the shadcn CLI.

## How do Wingo UI and shadcn/ui compare?

Checked on October 13, 2026. shadcn/ui facts link to its docs; Wingo UI facts come from our catalog and docs, and Wingo UI pricing from the [pricing page](https://wingo-ui.com/pricing).

| | shadcn/ui | Wingo UI |
| --- | --- | --- |
| Model | CLI copies source into your project ([CLI docs](https://ui.shadcn.com/docs/cli)) | Same, through its own CLI or the shadcn CLI as `@wingo-ui` |
| License | [MIT](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md) | Per-developer license; copied files stay yours after a subscription ends |
| Price | Free | 75 of 342 items free; Pro $8 a month, $80 a year or $150 lifetime |
| Catalog | Components and blocks, for Base UI, Radix and React Aria | 218 components, 43 blocks, 45 page templates, 17 hooks, 19 helpers |
| Primitives | Base UI (default), Radix or React Aria | Radix, vaul for sheets, Motion for animation |
| Mobile | Drawer component and a Dialog plus Drawer recipe you wire per overlay | Popover, select, menus, dialog and date pickers open as bottom sheets below 768px (`responsive`, default `true`); 44px targets on touch; safe areas; table rows become cards |
| Motion | CSS animations through `tw-animate-css` ([Tailwind v4 notes](https://ui.shadcn.com/docs/tailwind-v4)) | Spring presets from `lib/motion` with reduced-motion support |
| Theming | CSS variables, presets through `shadcn preset` and `shadcn apply` | CSS variable tokens, app-wide prop defaults through `UIProvider`, a [theme generator](https://wingo-ui.com/theme) |
| Updates | `add --diff` to compare, `--dry-run` to preview, `--overwrite` to replace | `outdated`, `diff`, `update` with a 3-way merge into edited files |
| AI agents | [MCP server](https://ui.shadcn.com/docs/mcp) for every registry in `components.json`, [skill](https://ui.shadcn.com/docs/skills) | [MCP server](https://wingo-ui.com/docs/mcp) with update checks, rule files for Claude Code, Codex, Gemini CLI, Grok and Cursor |

Wingo UI is one of several registries that sell source for the same model; if you are comparing shadcn paid components in general, the [alternatives guide](https://wingo-ui.com/blog/shadcn-alternatives) lists the others with their prices.

The table hides the biggest difference: community size. shadcn/ui has a large ecosystem of registries, tutorials and answered questions. Wingo UI is young and has a small community, so when something breaks you are more likely to read our source and docs than find a forum thread.

## When is shadcn/ui alone the better pick?

More often than a vendor would like to admit. Pick shadcn/ui and stop there when:

- **Budget is zero or the license must be MIT.** shadcn/ui is free for any use. Open source projects that redistribute their UI code should also stay on MIT components.
- **You want Base UI or React Aria underneath.** shadcn/ui ships updates and new components for both Base UI and Radix (`npx shadcn init -b radix` keeps Radix), and React Aria joined as a third base (`-b aria`) in July 2026. Wingo UI is Radix only, so adding it to a Base UI project means carrying two primitive libraries.
- **Your app lives on desktops.** If phones are an afterthought, the bottom sheet work Wingo UI does by default buys you little.
- **You rely on the ecosystem.** Community registries, blocks and examples are written for shadcn/ui first, and its MCP server can browse and install from all of them.
- **Your design system is the product.** If you plan to restyle every component anyway, the shadcn/ui source is a lean starting point with fewer props to strip out.

## When does Wingo UI add value?

When your app is used on phones, when you need screens rather than parts, or when you want to keep editing components and still take upstream fixes.

### Overlays that become sheets on phones

shadcn/ui gives you a Drawer and documents a recipe that renders a Dialog on desktop and a Drawer on mobile, which you write once per overlay. In Wingo UI the overlay components do it themselves. The free [Drawer](https://wingo-ui.com/components/drawer) is a draggable bottom sheet on phones, and its `desktop` prop picks what it becomes from 768px: the same sheet, a side panel or a centered 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 (
    <Drawer
      trigger={
        <Button variant="soft" leftIcon={<SlidersHorizontal />}>
          Filters
        </Button>
      }
      title="Filters"
      description="New York · 1,240 listings"
      desktop="side"
      closeLabel="Close filters"
      footer={
        <DrawerClose asChild>
          <Button size="lg" fullWidth>
            Show {results} results
          </Button>
        </DrawerClose>
      }
    >
      <p className="text-sm text-muted-foreground">Price, condition and categories</p>
    </Drawer>
  );
}
```

> Live demo (Drawer): Tap Filters: on a phone the sheet slides up and drags down to close; on a wide screen the same component opens as a side panel. Try it at [Drawer](https://wingo-ui.com/components/drawer) and install it with `npx wingo-ui@latest add drawer`.

The [Button](https://wingo-ui.com/components/button) in that footer follows the same rule set: its medium size is 40px tall with a mouse and grows to 44px on touch screens, and the small size keeps its look with a 44px hit area.

### Components instead of compositions

Some shadcn/ui entries are guides you assemble. Its [Date Picker](https://ui.shadcn.com/docs/components/date-picker) is a composition of Popover and Calendar with no `DatePicker` root component, and its [Data Table](https://ui.shadcn.com/docs/components/data-table) is a guide to building your own on TanStack Table v9. That is a fair design choice: you shape every variant yourself.

Wingo UI ships those as components with props. The [Date Picker](https://wingo-ui.com/components/date-picker) is a typed field that parses dates in your locale, takes limits, disabled days and presets, and opens a bottom sheet with 44px days on phones so the keyboard never covers the calendar:

```tsx
"use client";

import { useState } from "react";
import { addDays } from "date-fns";
import { DatePicker } from "@/components/ui/date-picker";

export function DeliveryDate() {
  const [date, setDate] = useState<Date | null>(null);
  return (
    <DatePicker
      label="Delivery date"
      description="We deliver Monday to Friday."
      value={date}
      onValueChange={setDate}
      locale="en-US"
      min={addDays(new Date(), 1)}
      disabled={{ dayOfWeek: [0, 6] }}
      presets
      sheetTitle="Delivery date"
      name="delivery_date"
    />
  );
}
```

> Live demo (Date Picker): Clear the date and type 09232026 to watch it format as you type, or open the calendar and pick a weekday; on a phone a tap opens a bottom sheet instead of the keyboard. Try it at [Date Picker](https://wingo-ui.com/components/date-picker) and install it with `npx wingo-ui@latest add date-picker`.

The [Data Table](https://wingo-ui.com/components/data-table) works the same way: search, filters, sorting, bulk actions, pinning, resizing and virtualization on TanStack Table v9, with rows that become cards below 768px. Both are Pro components. On top of the components sit 43 blocks (sign in, settings, dashboards, checkout) and 45 page templates.

### Updates that keep your edits

Owning the source means you edit it, and then upstream fixes a bug in the same file. The shadcn CLI can show the difference (`add --diff`) and preview a run (`--dry-run`), but bringing a fix into a file you changed is a manual merge. Our guide on [updating shadcn components without losing edits](https://wingo-ui.com/blog/update-shadcn-components-without-losing-edits) scripts that merge with git.

The Wingo UI CLI records the version of each item in `wingo-ui.json` and keeps the installed copy, so it can run a 3-way merge itself:

```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 replaced, your edits kept
```

Items you install through the shadcn CLI carry no version record, so `wingo-ui update` cannot merge into them. If updates matter to you, install Wingo UI items with its own CLI.

### Defaults you set once

Every visual aspect of a Wingo UI component is a prop with a default: size, variant, tone, radius, labels, icons. `UIProvider` sets app-wide defaults so the new components match your existing shadcn/ui look without passing props at every call site:

```tsx
import { UIProvider } from "@/lib/ui-config";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <UIProvider defaults={{ button: { radius: "sm" }, input: { radius: "sm" } }}>
          {children}
        </UIProvider>
      </body>
    </html>
  );
}
```

## How do the AI agent tools compare?

Both libraries publish an MCP server, and they do different jobs. The [shadcn MCP server](https://ui.shadcn.com/docs/mcp) browses, searches and installs items from every registry in `components.json`, including third-party ones like ours, and `npx shadcn@latest mcp init --client claude` sets it up for Claude Code. The [shadcn skill](https://ui.shadcn.com/docs/skills) reads your project configuration with `shadcn info --json` before the agent writes code.

The [Wingo UI MCP server](https://wingo-ui.com/docs/mcp) answers searches and returns props with defaults, design rules and theme tokens without an account; source needs an API key (a free account for free items, Pro for the rest). Its `check_updates` tool compares the versions in `wingo-ui.json` with the latest release. One command adds the server and a rules file for your agent:

```bash
npx wingo-ui@latest agents install claude   # or codex, gemini, grok, cursor, all
```

Since the shadcn MCP server reads `components.json`, an agent connected to it can also install from `@wingo-ui` once the registry entry is there. You can run both servers. The [shadcn registry tutorial](https://wingo-ui.com/blog/shadcn-registry-third-party-components) walks through adding the `@wingo-ui` entry and checking what an install writes before you commit it.

## How do you use both in one project?

Most teams that try Wingo UI keep shadcn/ui. A setup that works:

1. Keep shadcn/ui for the parts it covers well and that you already styled.
2. Install the Wingo UI pieces you lack with `npx wingo-ui@latest add <slug>`, one at a time, and commit before each.
3. Watch for collisions. Both libraries write `components/ui/button.tsx`, `dialog.tsx` and `drawer.tsx`. The Wingo UI CLI keeps an existing file that differs and asks you to rerun with `--overwrite`, so you decide which one wins.
4. Update call sites when you swap a component. shadcn/ui's Button uses `variant="destructive"` and `variant="secondary"`; Wingo UI separates role from color, so those become `tone="danger"` and `variant="soft"`.
5. Set `UIProvider` defaults so radius and sizes match the components you kept.

## Wingo UI or shadcn: which one should you pick?

- **A free, MIT, desktop-first app, or a design system you will restyle completely:** shadcn/ui.
- **A Base UI or React Aria project:** shadcn/ui, since Wingo UI brings Radix along.
- **An app people use on phones and desktops, where overlays, pickers and tables must work at 390px:** add Wingo UI.
- **Screens you would otherwise build from parts, such as a filterable admin table, settings or checkout:** Wingo UI blocks and Pro components ([shadcn blocks vs components](https://wingo-ui.com/blog/shadcn-blocks-vs-components) explains when to start from a block).
- **Components you will edit and still want to update:** Wingo UI's CLI, because of the 3-way merge.

The cheapest test is a free component on your own phone. Install the Drawer with `npx wingo-ui@latest add drawer` (no account needed), put it behind one trigger in your shadcn/ui project, and open it at 390px. More head-to-heads live under [Comparisons and alternatives](https://wingo-ui.com/blog/category/comparisons).

## Components in this post

- [Button](https://wingo-ui.com/components/button) (Free): The React button component every screen starts with: five variants, six tones, all sizes, and a loading state that never jumps. Install: `npx wingo-ui@latest add button`
- [Drawer](https://wingo-ui.com/components/drawer) (Free): A React drawer and bottom sheet built 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): A React data table on TanStack Table: search, filters, sorting, bulk actions, pinning, resizing, virtualization and cards on phones. Install: `npx wingo-ui@latest add data-table`
- [Date Picker](https://wingo-ui.com/components/date-picker) (Pro): A React date picker: type a date in your locale or pick it from a calendar, with presets, limits, optional time and a phone sheet. Install: `npx wingo-ui@latest add date-picker`

## FAQ

### Is Wingo UI compatible with shadcn/ui?

Yes. Free Wingo UI items install from their URL with npx shadcn@latest add, and Pro items through the @wingo-ui namespaced registry in components.json with your API key. The exception is a shadcn project created with a Base UI style, which rewrites asChild; use npx wingo-ui@latest add there.

### Is shadcn/ui free for commercial use?

Yes. shadcn/ui is MIT licensed, so you can use, modify and ship it in commercial products without paying. Wingo UI's 75 free items are free too, and the rest need a Pro license of $8 a month, $80 a year or $150 once per developer.

### Can I use Wingo UI and shadcn/ui in the same project?

Yes. Both write into components/ui and use Tailwind CSS v4 tokens, so the usual setup is shadcn/ui as the base plus Wingo UI for the components you need. Commit before each install, because files with the same name, such as button.tsx, will collide.

### How do updates differ between shadcn/ui and Wingo UI?

The shadcn CLI shows what changed with add --diff and replaces the file with --overwrite, so merging your edits is up to you. The Wingo UI CLI records each installed version and keeps the installed copy, so npx wingo-ui@latest update runs a 3-way merge and keeps your edits.

### Do both work with Claude Code and Cursor?

Yes. shadcn/ui has an MCP server and a skill for coding agents. Wingo UI has an MCP server that also checks installed versions for updates, plus npx wingo-ui@latest agents install, which writes rule files for Claude Code, Codex, Gemini CLI, Grok and Cursor.

---

Source: https://wingo-ui.com/blog/wingo-ui-vs-shadcn