React UI Playground

컴포넌트

shadcn/ui ／ MUI ／ Mantine

추천

shadcn/ui

Tailwind CSS와 잘 맞고, 현재 가장 인기 있는 선택입니다. 코드가 보이므로 문제가 생기면 직접 고칠 수 있습니다

결과 비교

같은 것을 각 라이브러리로 만들었습니다. 직접 만져 보세요.

shadcn/ui

MUI

Mantine

코드 비교

코드를 고치면 오른쪽 미리보기가 바로 바뀝니다.

내 프로젝트에서 이 예제를 실행하려면:npx shadcn@latest add button

import { Button } from "./components/ui/button"

export default function App() {
  return (
    <div className="flex flex-wrap gap-3 p-4">
      <Button>저장</Button>
      <Button variant="outline">취소</Button>
      <Button variant="ghost">자세히 보기</Button>
    </div>
  )
}

비교

2026년 9월 기준

shadcn/ui

추천공식 사이트 ↗

특징

컴포넌트 코드를 내 프로젝트에 복사해서 사용합니다. 내용은 자유롭게 고칠 수 있습니다

이럴 때 좋아요

디자인을 자유롭게 바꾸고 싶을 때. Tailwind CSS를 사용할 때

MUI

공식 사이트 ↗

특징

Google 스타일(Material Design) 컴포넌트가 처음부터 모두 갖춰져 있습니다

이럴 때 좋아요

디자인 고민 없이 관리 화면 등을 빠르게 만들고 싶을 때

Mantine

공식 사이트 ↗

특징

컴포넌트 외에도 편리한 Hook(예: useDisclosure)이 많습니다

이럴 때 좋아요

기능을 많이 쓰고 싶고 CSS는 직접 쓰고 싶지 않을 때