Roblox Material UI

A library of Roact UI components that roughly follow the Material Design 3 Guidlines. It also includes Material Color Utilities like Scheme, Palettes, HCT, and Blend.

This is still in alpha, and not all components are included yet so I wouldn't recommend using it in production games. Though feel free to contribute if you want.

Currently Indcluded Components

• UIBase (unofficial)
• Topbar (similar to a center aligned Top App Bar)
• Switch & SwitchTile
• Slider & SliderTile
• SectionTitle (unofficial)
• RoundedFrame (similar to Cards)
• ProgressBar (unofficial)
• IconButton (standard only)
• Icon
• ColorTile (unofficial)
• Shadow
• All Common Buttons except for ElevatedButton

Examples

// Creates a red filled button in the center of the screen
import { FilledButton, Scheme, Theme, ThemeState } from '@rbxts/material-ui';
import Roact from '@rbxts/roact';
import { Players } from '@rbxts/services';

const themeColor = Color3.fromRGB(255, 0, 0);
const theme: ThemeState = {
	Color: themeColor,
	Theme: Theme.Dark,
	Scheme: Scheme.dark(themeColor).Colors,
};

const component = (
	<screengui>
		<FilledButton
			Theme={theme}
			AnchorPoint={new Vector2(0.5, 0.5)}
			Position={UDim2.fromScale(0.5, 0.5)}
			Text='This is a button!'
			AutomaticSize
			Pressed={() => {
				print('pressed!');
			}}
		/>
	</screengui>
);

const player = Players.LocalPlayer;
Roact.mount(component, player.WaitForChild('PlayerGui'));