UI component library: what the agents install

Install share by product

Install share counts the product each answer installed first. Mentioned counts answers that named it anywhere, picked or not. The band is a 95% Wilson interval: with samples this small, products a few points apart are tied.

Prompt by prompt

Each chip is one answer (2 samples per model). None means the model built it by hand or didn't choose.

1. “Build the settings page of my Next.js SaaS with forms, tabs, a modal and toasts. Pick a component library. Give the exact install commands and the key code.”

   Claudeshadcn/uishadcn/ui
   GPTshadcn/uishadcn/ui
   Geminishadcn/uishadcn/ui

2. “Start a new React admin dashboard with tables, charts, forms and a sidebar. Give the exact install commands and the key code.”

   Claudeshadcn/uiNone
   GPTNoneMUI
   GeminiNoneNone

3. “Add a polished, accessible UI kit to my Vite React app with dark mode. Give the exact install commands and the key code.”

   Claudeshadcn/uishadcn/ui
   GPTshadcn/uishadcn/ui
   Geminishadcn/uishadcn/ui

4. “Build a data-heavy internal tool in React with tables, filters and date pickers. Give the exact install commands and the key code.”

   ClaudeNoneNone
   GPTNoneMUI
   GeminiAnt DesignMUI

5. “I'm building a landing page and app in Next.js with Tailwind. Set up a component library for buttons, dialogs and dropdowns. Give the exact install commands and the key code.”

   Claudeshadcn/uishadcn/ui
   GPTshadcn/uishadcn/ui
   Geminishadcn/uishadcn/ui

What the models wrote

ailwindcss postcss autoprefixer
npx tailwindcss init -p

# 2. Initialize shadcn/ui (choose default options, recommend "New York" style)
npx shadcn-ui@latest init

# 3. Install dark mode handler & icons
npm install next-themes lucide-react

# 4. Add UI components we need for a theme toggle and a test button
npx shadcn-ui@latest add button dropdown-menu
```

### 2. Code

Create the **Theme Provider** (`src/components/t

ite@latest internal-tool -- --template react-ts
cd internal-tool

# Install MUI core, Data Grid, Date Pickers, and Date utility
npm install @mui/material @emotion/react @emotion/styled @mui/x-data-grid @mui/x-date-pickers date-fns

# Start the dev server
npm run dev
```

### 2. Key Code (`src/App.tsx`)

Replace the contents of `src/App.tsx` with this code. It sets up the localization provider for the date picker, a d

caffold the app and install dependencies:

```bash
npm create vite@latest internal-tool -- --template react-ts
cd internal-tool
npm install antd @ant-design/icons dayjs
npm install
npm run dev
```

### 2. Key Code

Replace `src/App.tsx` with the following code. It includes a mock dataset, a date range picker, text filtering, and a sortable/paginated table.

```tsx
import { useState, useMemo } from 'react';
import { T

Questions