Does it support Next.js Server Components?

Yes, though it clarifies that interactive components require the 'use client' directive while static components can be used in server environments.

Base UI is an unstyled React component library focused on accessibility and flexibility, created by the team behind Radix UI and Material UI.

Does this skill support Tailwind CSS?

Yes, the guide provides specific patterns for styling Base UI components using Tailwind CSS, CSS Modules, and plain CSS via state-based data attributes.

Is Base UI the same as Shadcn/ui or Radix UI?

No, Base UI is a separate headless library with its own unique API. This skill specifically covers @base-ui/react and explicitly distinguishes it from Radix or Shadcn/ui.

How does it handle animations?

The guide covers CSS transitions, CSS animations using data-state attributes, and JavaScript-based animations using the keepMounted prop and libraries like Motion.

Base UI Component Guide

Name: Base UI Component Guide
Author: vcode-sh

byvcode-sh

•

デザインツール

Provides expert guidance for building accessible, unstyled React interfaces using the @base-ui/react library.

The Base UI Component Guide is a specialized technical resource designed to help developers master @base-ui/react, the headless component library from the creators of Radix and MUI. It provides comprehensive implementation patterns for over 35 components, ranging from complex form controls like Comboboxes and Sliders to navigation elements like Menus and Dialogs. The skill offers deep insights into WAI-ARIA accessibility, advanced composition via render props, and modern styling strategies using data attributes and CSS variables, ensuring your UI is both flexible and standards-compliant.

主な機能

01Expert implementation patterns for 35+ unstyled React components

02Animation best practices for interruptible and smooth UI transitions

03Styling strategies for Tailwind CSS, CSS Modules, and plain CSS

04Comprehensive guidance on WAI-ARIA accessibility and focus management

0516 GitHub stars

06Advanced composition techniques using the render prop pattern

ユースケース

01Implementing complex interactive components like searchable Comboboxes

02Building a custom, accessible design system from unstyled primitives

03Creating performant, animated overlays and navigation for React applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vcode-sh/vibe-tools base-ui-guide

For use in Claude.ai and ChatGPT

Download Skill