base-ui-react

Name: base-ui-react
Author: jackspace

15stars7forks

How to install base-ui-react?

jackspace/claudeskillz/base-ui-react

$npx -y skills add jackspace/ClaudeSkillz --skill base-ui-react

Installs into the current project.

Summary

Production-tested setup for Base UI (@base-ui-components/react) - MUI's unstyled component library that provides accessible, customizable React components using render props pattern. This skill should be used when building accessible UIs with full styling control, migrating from

Files · 1

View on GitHub

SKILL.md

1	# Base UI React
2
3	Status: Beta (v1.0.0-beta.4) - Stable v1.0 expected Q4 2025
4	Last Updated: 2025-11-07
5	Dependencies: React 19+, Vite (recommended), Tailwind v4 (recommended)
6	Latest Versions: @base-ui-components/react@1.0.0-beta.4
7
8	---
9
10	## ⚠️ Important Beta Status Notice
11
12	Base UI is currently in beta. Before using in production:
13
14	- ✅ Stable: Core components (Dialog, Popover, Tooltip, Select, Accordion) are production-ready
15	- ⚠️ API May Change: Minor breaking changes possible before v1.0 (Q4 2025)
16	- ✅ Production Tested: Used in real projects with documented workarounds
17	- ⚠️ Known Issues: 10+ documented issues with solutions in this skill
18	- ✅ Migration Path: Clear migration guide from Radix UI included
19
20	Recommendation: Use for new projects comfortable with beta software. Wait for v1.0 for critical production apps.
21
22	---
23
24	## Quick Start (5 Minutes)
25
26	### 1. Install Base UI
27
28	```bash
29	pnpm add @base-ui-components/react
30	```
31
32	Why this matters:
33	- Single package contains all 27+ accessible components
34	- No peer dependencies besides React
35	- Tree-shakeable - only import what you need
36	- Works with any styling solution (Tailwind, CSS Modules, Emotion, etc.)
37
38	### 2. Use Your First Component
39
40	```typescript
41	// src/App.tsx
42	import { Dialog } from "@base-ui-components/react/dialog";
43
44	export function App() {
45	return (
46	<Dialog.Root>
47	{/* Render prop pattern - Base UI's key feature */}
48	<Dialog.Trigger
49	render={(props) => (
50	<button {...props} className="px-4 py-2 bg-blue-600 text-white rounded">
51	Open Dialog
52	</button>
53	)}
54	/>
55
56	<Dialog.Portal>
57	<Dialog.Backdrop
58	render={(props) => (
59	<div {...props} className="fixed inset-0 bg-black/50" />
60	)}
61	/>
62
63	<Dialog.Popup
64	render={(props) => (
65	<div
66	{...props}
67	className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl p-6"
68	>
69	<Dialog.Title render={(titleProps) => (
70	<h2 {...titleProps} className="text-2xl font-bold mb-4">
71	Dialog Title
72	</h2>
73	)} />
74
75	<Dialog.Description render={(descProps) => (
76	<p {...descProps} className="text-gray-600 mb-6">
77	This is a Base UI dialog. Fully accessible, fully styled by you.
78	</p>
79	)} />
80
81	<Dialog.Close render={(closeProps) => (
82	<button {...closeProps} className="px-4 py-2 border rounded">
83	Close
84	</button>
85	)} />
86	</div>
87	)}
88	/>
89	</Dialog.Portal>
90	</Dialog.Root>
91	);
92	}
93	```
94
95	CRITICAL:
96	- ✅ Always spread `{...props}` from render functions
97	- ✅ Use `<Dialog.Portal>` to render outside DOM hierarchy
98	- ✅ `Backdrop` and `Popup` are separate components (unlike Radix's combined `Overlay + Content`)
99
100	### 3. Components with Positioning (Select, Popover, Tooltip)
101
102	For components that need smart positioning, wrap in `Positioner`:
103
104	```typescript
105	import { Popover } from "@base-ui-components/react/popover";
106
107	<Popover.Root>
108	<Popover.Trigger
109	render={(props) => <button {...props}>Open</button>}
110	/>
111
112	{/* Positioner uses Floating UI for smart positioning */}
113	<Popover.Positioner
114	side="top" // top, right, bottom, left
115	alignment="center" // start, center, end
116	sideOffset={8}
117	>
118	<Popover.Portal>
119	<Popover.Popup
120	render={(props) => (
121	<div {...props}

People who liked this also viewed

6 picks

Type

base-ui-react

15stars7forks

View on GitHub

How to install base-ui-react?

jackspace/claudeskillz/base-ui-react

$npx -y skills add jackspace/ClaudeSkillz --skill base-ui-react

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Base UI React
2
3	Status: Beta (v1.0.0-beta.4) - Stable v1.0 expected Q4 2025
4	Last Updated: 2025-11-07
5	Dependencies: React 19+, Vite (recommended), Tailwind v4 (recommended)
6	Latest Versions: @base-ui-components/react@1.0.0-beta.4
7
8	---
9
10	## ⚠️ Important Beta Status Notice
11
12	Base UI is currently in beta. Before using in production:
13
14	- ✅ Stable: Core components (Dialog, Popover, Tooltip, Select, Accordion) are production-ready
15	- ⚠️ API May Change: Minor breaking changes possible before v1.0 (Q4 2025)
16	- ✅ Production Tested: Used in real projects with documented workarounds
17	- ⚠️ Known Issues: 10+ documented issues with solutions in this skill
18	- ✅ Migration Path: Clear migration guide from Radix UI included
19
20	Recommendation: Use for new projects comfortable with beta software. Wait for v1.0 for critical production apps.
21
22	---
23
24	## Quick Start (5 Minutes)
25
26	### 1. Install Base UI
27
28	```bash
29	pnpm add @base-ui-components/react
30	```
31
32	Why this matters:
33	- Single package contains all 27+ accessible components
34	- No peer dependencies besides React
35	- Tree-shakeable - only import what you need
36	- Works with any styling solution (Tailwind, CSS Modules, Emotion, etc.)
37
38	### 2. Use Your First Component
39
40	```typescript
41	// src/App.tsx
42	import { Dialog } from "@base-ui-components/react/dialog";
43
44	export function App() {
45	return (
46	<Dialog.Root>
47	{/* Render prop pattern - Base UI's key feature */}
48	<Dialog.Trigger
49	render={(props) => (
50	<button {...props} className="px-4 py-2 bg-blue-600 text-white rounded">
51	Open Dialog
52	</button>
53	)}
54	/>
55
56	<Dialog.Portal>
57	<Dialog.Backdrop
58	render={(props) => (
59	<div {...props} className="fixed inset-0 bg-black/50" />
60	)}
61	/>
62
63	<Dialog.Popup
64	render={(props) => (
65	<div
66	{...props}
67	className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl p-6"
68	>
69	<Dialog.Title render={(titleProps) => (
70	<h2 {...titleProps} className="text-2xl font-bold mb-4">
71	Dialog Title
72	</h2>
73	)} />
74
75	<Dialog.Description render={(descProps) => (
76	<p {...descProps} className="text-gray-600 mb-6">
77	This is a Base UI dialog. Fully accessible, fully styled by you.
78	</p>
79	)} />
80
81	<Dialog.Close render={(closeProps) => (
82	<button {...closeProps} className="px-4 py-2 border rounded">
83	Close
84	</button>
85	)} />
86	</div>
87	)}
88	/>
89	</Dialog.Portal>
90	</Dialog.Root>
91	);
92	}
93	```
94
95	CRITICAL:
96	- ✅ Always spread `{...props}` from render functions
97	- ✅ Use `<Dialog.Portal>` to render outside DOM hierarchy
98	- ✅ `Backdrop` and `Popup` are separate components (unlike Radix's combined `Overlay + Content`)
99
100	### 3. Components with Positioning (Select, Popover, Tooltip)
101
102	For components that need smart positioning, wrap in `Positioner`:
103
104	```typescript
105	import { Popover } from "@base-ui-components/react/popover";
106
107	<Popover.Root>
108	<Popover.Trigger
109	render={(props) => <button {...props}>Open</button>}
110	/>
111
112	{/* Positioner uses Floating UI for smart positioning */}
113	<Popover.Positioner
114	side="top" // top, right, bottom, left
115	alignment="center" // start, center, end
116	sideOffset={8}
117	>
118	<Popover.Portal>
119	<Popover.Popup
120	render={(props) => (
121	<div {...props}

People who liked this also viewed

6 picks

Type