My Honest Shadcn UI Experience: What Worked and What Didn’t 2025

Shadcn UI Experience: Real Lessons for React Developers

I started using Shadcn UI on small React projects, and at first, it worked wonderfully. The components are easy to generate using the CLI, and I could customize them directly in my code. With Tailwind CSS integration, styling was smooth and flexible. If your project is small, this setup lets you move fast and stay light.

Why Shadcn UI is Good for Small Apps

For small projects, Shadcn UI’s “copy the code” style worked great. I added a button easily with a simple command:

npx shadcn add button

npx shadcn add button

Then I imported and used it like this:

import { Button } from '@shadcn/ui';

function App() {
  return (
    <Button onClick={() => alert('Clicked!')}>Click Me</Button>
  );
}

import { Button } from '@shadcn/ui';

function App() {
  return (
    <Button onClick={() => alert('Clicked!')}>Click Me</Button>
  );
}

This simplicity is perfect for quick building and maximum control.

The Challenge: Growing With Shadcn UI

However, for bigger projects, my Shadcn UI experience became more complicated. I needed multi-select dropdowns, stepper forms, and grouped checkboxes—components that Shadcn UI does not include out-of-the-box. I had to build these components from scratch with accessibility and keyboard support in mind.

Here’s an example of how I started building a multi-select dropdown component in React:

import React, { useState } from 'react';

function MultiSelect({ options }) {
  const [selected, setSelected] = useState([]);

  function toggleOption(option) {
    setSelected(prev =>
      prev.includes(option)
        ? prev.filter(o => o !== option)
        : [...prev, option]
    );
  }

  return (
    <div>
      {options.map(option => (
        <label key={option}>
          <input
            type="checkbox"
            checked={selected.includes(option)}
            onChange={() => toggleOption(option)}
          />
          {option}
        </label>
      ))}
    </div>
  );
}

export default MultiSelect;

import React, { useState } from 'react';

function MultiSelect({ options }) {
  const [selected, setSelected] = useState([]);

  function toggleOption(option) {
    setSelected(prev =>
      prev.includes(option)
        ? prev.filter(o => o !== option)
        : [...prev, option]
    );
  }

  return (
    <div>
      {options.map(option => (
        <label key={option}>
          <input
            type="checkbox"
            checked={selected.includes(option)}
            onChange={() => toggleOption(option)}
          />
          {option}
        </label>
      ))}
    </div>
  );
}

export default MultiSelect;

This took proper time to implement and test fully for accessibility. In contrast, Ant Design offers a ready-made multi-select:

import { Select } from 'antd';

const { Option } = Select;

function AntdMultiSelect() {
  return (
    <Select mode="multiple" style={{ width: '300px' }} placeholder="Select options">
      <Option value="option1">Option 1</Option>
      <Option value="option2">Option 2</Option>
      <Option value="option3">Option 3</Option>
    </Select>
  );
}

import { Select } from 'antd';

const { Option } = Select;

function AntdMultiSelect() {
  return (
    <Select mode="multiple" style={{ width: '300px' }} placeholder="Select options">
      <Option value="option1">Option 1</Option>
      <Option value="option2">Option 2</Option>
      <Option value="option3">Option 3</Option>
    </Select>
  );
}

This component works perfectly with built-in keyboard navigation and accessibility right away.

Team Effort Needed for Large Projects

My Shadcn UI experience in large apps involved dedicating developers just to maintain these custom components. Each UI change or bug fix meant updating lots of code and retesting. With big frameworks like Ant Design or MUI, updates are released regularly, and maintenance is simpler.

Bundle Size and Performance

A benefit of Shadcn UI is that you only add code you use, keeping bundles smaller. But when many components are custom-built, the size grows naturally. I learned to use compression and tree-shaking tools to keep load times fast.

Should You Use Shadcn UI for Big Apps?

From my Shadcn UI experience, Shadcn is excellent when you want total control over UI and have the time to build components yourself. But if you want to move quickly with a smaller team, libraries like Ant Design or MUI are better because they save you a lot of development time.

Tips to Boost Your Shadcn Experience

• Plan components early and decide if building custom is worth it.
• Use Shadcn CLI to generate base components quickly.
• Regularly test for accessibility and consistency.
• Use performance tools to minimize bundle size.

Summary

Shadcn UI is a great tool for developers who prefer building their own UI pieces and want flexibility. But as you scale, expect to spend more time building and maintaining components compared to mature UI frameworks. Choose wisely based on your team size, project needs, and delivery timelines.