mui / mui/base-ui

Make CssVars and DataAttributes enums public

Open
#5,242 2 comments 0 reactions 1 assignee Claimed by @atomiks View on GitHub
scope: all components type: enhancement
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Feature request

## Summary

Export typed constants (enums) for CSS custom properties and data attributes exposed by Base UI components, so consumers can reference them in a statically-typed way instead of hardcoding string literals.

## Examples in other libraries

ArkUI kinda does that with their `@ark-ui/react/anatomy`. While it mainly exposes "parts", it has `_open` states, etc.

## Motivation

CSS variable and data attribute names exposed by Base UI components are currently only documented as plain strings, e.g.:
```
var(--nested-dialogs)
```
Instead, we could have something like:
```
var(${DialogPopupCssVars.nestedDialogs})
```

This would give autocomplete, compile-time safety against typos, and refactor safety if Base UI ever renames an internal var or attribute - all of which TypeScript can't currently catch, leading to silently broken styles.
This is mainly for developers building custom styling on top of Base UI's unstyled components (CSS-in-JS, vanilla CSS with var(), or JS reading data-* attributes for conditional logic).

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.