Interactive Visualization of Style Props

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.

https://skeleton.dev

MIT License

5.16k stars 322 forks source link

Interactive Visualization of Style Props #2587

Open endigo9740 opened 7 months ago

endigo9740 commented 7 months ago

Mantine does a wonderful job of this: https://mantine.dev/core/menu/#styles-api

We likely won't be able to get a version of this working for -every- component at launch. However, having this as a visual guide to explain the prefixed prop names for style properties might be a valuable learning tool!

When you hover over a section on the right, the respective portion of the component is highlighted with a red outline.

endigo9740 commented 2 months ago

See also the Anatomy sections from Zag: https://zagjs.com/components/react/accordion#anatomy

I think we could construct these using some kind of recursive components that are basically an outline + label. Something like this, which represents the current Avatar component: