MUI Base UI unstyled React components with Floating UI. Use for accessible components, Radix UI migration, render props API, or encountering positioning, popup, v1.0 rc / pre-GA issues.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Status: Release Candidate (v1.0.0-rc.0) ⚠️ | Last Verified: 2026-08-03
MUI's unstyled, accessible React component library:
Release Candidate status: v1.0.0-rc.0 (stable v1.0 GA expected soon — still pre-GA, API may change)
bun add @base-ui-components/react
import * as Dialog from '@base-ui-components/react/dialog';
export function MyDialog() {
return (
<Dialog.Root>
<Dialog.Trigger>Open</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Backdrop />
<Dialog.Popup>
<Dialog.Title>Title</Dialog.Title>
<Dialog.Description>Content</Dialog.Description>
<Dialog.Close>Close</Dialog.Close>
</Dialog.Popup>
</Dialog.Portal>
</Dialog.Root>
);
}
import * as Select from '@base-ui-components/react/select';
<Select.Root>
<Select.Trigger>
<Select.Value placeholder="Select" />
</Select.Trigger>
<Select.Portal>
<Select.Positioner>
<Select.Popup>
<Select.Option value="1">Option 1</Select.Option>
<Select.Option value="2">Option 2</Select.Option>
</Select.Popup>
</Select.Positioner>
</Select.Portal>
</Select.Root>
Load references/setup-guide.md for complete examples.
Available (27+):
<Dialog.Popup className="rounded-lg bg-white p-6 shadow-xl dark:bg-gray-800">
<Dialog.Title className="text-xl font-bold text-gray-900 dark:text-white">
Dialog Title
</Dialog.Title>
<Dialog.Description className="mt-2 text-gray-600 dark:text-gray-300">
Dialog content here
</Dialog.Description>
<Dialog.Close className="mt-4 rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
Close
</Dialog.Close>
</Dialog.Popup>
<Dialog.Root>
<Dialog.Trigger className="btn">Open Modal</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Backdrop className="fixed inset-0 bg-black/50" />
<Dialog.Popup className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6">
<Dialog.Title>Confirm Action</Dialog.Title>
<Dialog.Description>Are you sure?</Dialog.Description>
<Dialog.Close>Cancel</Dialog.Close>
</Dialog.Popup>
</Dialog.Portal>
</Dialog.Root>
<Select.Root>
<Select.Trigger className="flex items-center gap-2 rounded border px-4 py-2">
<Select.Value placeholder="Select option" />
</Select.Trigger>
<Select.Portal>
<Select.Positioner className="z-50">
<Select.Popup className="rounded border bg-white shadow-lg">
<Select.Option value="1" className="px-4 py-2 hover:bg-gray-100">
Option 1
</Select.Option>
<Select.Option value="2" className="px-4 py-2 hover:bg-gray-100">
Option 2
</Select.Option>
</Select.Popup>
</Select.Positioner>
</Select.Portal>
</Select.Root>
import * as Tooltip from '@base-ui-components/react/tooltip';
<Tooltip.Root>
<Tooltip.Trigger>Hover me</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Positioner>
<Tooltip.Popup className="rounded bg-gray-900 px-2 py-1 text-sm text-white">
Tooltip text
</Tooltip.Popup>
</Tooltip.Positioner>
</Tooltip.Portal>
</Tooltip.Root>
Stable for production:
Use with caution:
Migration path:
| Feature | Base UI | Radix UI |
|---|---|---|
| Pattern | Render props | asChild |
| Positioning | Floating UI built-in | Manual |
| Beta | Yes | Stable |
| Tree-shaking | Better | Good |
| Bundle size | Smaller | Larger |
When to use Base UI:
When to use Radix:
References (references/):
example-reference.md - Detailed component examples and patternsmigration-from-radix.md - Complete migration guide from Radix UI (includes render prop pattern explanation)setup-guide.md - Installation and setup walkthroughTemplates (templates/):
Accordion.tsx - Accordion component with render propsDialog.tsx - Modal dialog exampleNumberField.tsx - Number input with validationPopover.tsx - Popover with positioningSelect.tsx - Select dropdownTooltip.tsx - Tooltip componentmigration-example.tsx - Radix to Base UI migration exampleQuestions? Issues?
references/setup-guide.md for setup아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Secure API authentication with JWT, OAuth 2.0, API keys. Use for authentication systems, third-party integrations, service-to-service communication, or encountering token management, security headers, auth flow errors.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Creates comprehensive API changelogs documenting breaking changes, deprecations, and migration strategies for API consumers. Use when managing API versions, communicating breaking changes, or creating upgrade guides.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Verifies API contracts between services using consumer-driven contracts, schema validation, and tools like Pact. Use when testing microservices communication, preventing breaking changes, or validating OpenAPI specifications.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers. Use when designing new APIs, reviewing API specifications, or establishing API design standards.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Implements standardized API error responses with proper status codes, logging, and user-friendly messages. Use when building production APIs, implementing error recovery patterns, or integrating error monitoring services.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.