mui / mui/base-ui

[accordion] <summary> / <details> based implementation

Open
#1,148 2 comments 2 reactions 0 assignees View on GitHub
component: accordion discussion performance type: enhancement
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Feature request

## Summary

Today, the accordion is built on top of the collapsible pattern.

## Examples in other libraries

## Motivation

We might be able to reduce bundle size.

I'm not super clear on what's preventing us from making this move, but I believe that we need an issue to document this. Developers will ask themselves: why couldn't I simply do this?

Examples of people pushing `` / `` further:

- https://www.youtube.com/watch?v=Vzj3jSUbMtI
- https://github.com/adobe/react-spectrum/discussions/6635#discussioncomment-9990027
- https://x.com/mauroreisvieira/status/1868999019126808925
- https://developer.mozilla.org/en-US/blog/html-details-exclusive-accordions/

Limitations that we are aware of:

- Customization slots are hidden behind shadow dom. https://youtu.be/Vzj3jSUbMtI?si=xgnEsufFODhuwhfV&t=295. People need to enable:

SCR-20241217-nzoi

to figure out you can use `details::details-content {`. It's not a great DX to style with Tailwind CSS, etc. It's hard to discover what can be styled.

- else?

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.