Synthetic: 29 Material Design UI Components with Fusion + Roact + Vanilla Compatibility!

Synthetic

Hello everyone!

I’ve been working on this typesafe UI Library for almost 3 years. All of these components are hoarcekat compatible. To keep the framework lightweight, all components can be created with minimal buy in to the other features offered.

Highlights

Here are just a few of the 29 (as of v9.2.2) different UI components.

Slider

preview

Checkbox

preview

Text Field

preview

Dialog

preview

Circular Progress Indicator

preview

Search Bar

preview

… and 23 more!

Enjoy!

If you have any ideas, or find any bugs, please either post here or make an issue on the github page! Thank you!

Links

GitHub + Documentation
Wally
Download Rbxl

53 Likes

Wally support, Fusion+Roact compatibility, hoarcekat stories, open-source GitHub, wide coverage of typed MD3 components and of course this big documentation…

this is an incredible gift!

So hey, let’s do the nitpicks to make it perfect:

Well, these are all visual nitpicks. If you can resolve the clipping issue, I suppose this is already production-worthy. The technical side of the library (which you have visibly invested in) looks really good, didn’t expect the whole theme engine to be ported over!

Thanks a lot for the contribution!

10 Likes

I’ll begin working on a patch for these, thank you for your feedback!

3 Likes

Alright! Version 9.2.2 should have all of these changes. I’ll be going through and updating the documentation preview gifs later today. Thank you again!

3 Likes

This looks crispy! Sharing this was very convenient timing; my team has been working on a complete UI overhaul of our game.

2 Likes

When I put the package in the game the script editor gets really bad, does anyone have a tip to avoid this?

1 Like

Can you elaborate what gets bad? Do you mean it shows red lines (linter)? Does it disable formatting?

Feel free to share a screenshot.

1 Like

exactly what you said happens
(

1 Like

So, to my understanding this is what happens when the studio internal language service provider is overwhelmed. If you do ever move to VSCode, you can change the configuration of the LSP plugin flags to have it handle things much more smoothly, however that probably doesn’t help you right now.

Long term it might be worth pursuing a more advanced build / publish workflow to export each workflow compatability separately (for example SyntheticFusion, SyntheticRoact, etc), as well as provide versions which can be downloaded that have the type safety stripped out of them.

Here are some potential workarounds to try in the meantime:

  • press ctrl+shift+f to open the find all / replace all menu. Then go and replace all --!strict mentions in the package with --!nocheck.
  • in file -> Studio Settings -> Script Editor, consider lowering the “Large File” thresholds
  • go through and delete any script named “Fusion”, “Roact”, or “Wrapper”, excluding the workflow you intend to use. Do not delete “ColdFusion” as that’s the source code.
  • go through and delete all the complex types, aka anything that includes a <...>, {...}, |, &, ? - this will break a lot of the editor type safety, but reduce the burden on the solver without changing any runtime behavior.

Will definitely follow up with you once I have some official solutions. Thank you!

1 Like