Material Design 3 for Roblox

coming soon: a plugin to create dynamic color schemes for your game and apply them automatically to your material design 3 components! :art:

ui thats easy for both players and developers to use

yes. im working on porting all of the components in material design 3 to roblox so developers can easily make easy to use and elegant ui

this post serves to house the links to the components as i add them

all components are designed for a dark-mode theme


:scroll: this component lacks sufficient documentation

Badges are used to indicate a notification, item count, or other information relating to a navigation destination. They are placed on the ending edge of icons, typically within other components.


Bottom Sheets ( WIP )

:x: this component has not been scripted yet

Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.

Navigation Bar

:white_check_mark: this component is ready for use in games

Navigation bars (nav bars) provide access to three to five destinations. The nav bar is positioned at the bottom of screens for convenient access. Each destination is represented by an icon and optional text label. When a navigation bar icon is tapped or focused, the user is taken to the navigation destination associated with that icon.

Navigation bars should only be used on mobile displays, like phones and tablets! For desktop displays, use navigation rails or tabs

a bindable event is fired in each destination when it is clicked


if you use these components in your game, credit is not required but is highly appreciated :slight_smile: