Fusion Components - 31 beautiful modern components for Fusion 0.2

Resources Community Resources
, ,
#1

What is FusionComponents?

FusionComponents is a large collection of components for varying use cases. It was originally designed to increase development speed for plugins, but has since been expanded to be used in any Roblox project.

Features

  • Built with Tailwind colors and ThemeFramework, providing a consistent look and excellent developer experience.
  • 31 components, including buttons, inputs, and modals, suitable for almost every usecase.
  • Almost every component can be customized to use any Tailwind color, resulting in a wide range of possible appearances.
  • Utilizes Lucide Icon Set via lucide-roblox, offering a wide range of icons.
  • Properties are strongly typed, ensuring a great DX and reducing the risk of runtime errors.
  • Seamlessly integrates with your existing Fusion project; Fusion Components tie in with existing codebases and most components take properties that are applied to the instance, for maximum customization.
  • Infinite customisability through AppearanceOverrides, allowing you to change any aspect of a component’s appearance.
  • Straightforward theming: Through ThemeFramework, colors, transparencies and shadows for any state can be customized with ease on any component.
  • Inspired by Nuxt UI, providing variants that can be used to change the appearance of a component to one of the predefined styles, without having to customize anything else.

Showcase

A few components are showcased below. The library contains a lot more than just these, but this should give you an idea of the general look!

Alert

alert_showcase
alert_showcase1461×1211 411 KB

Button

button_showcase
button_showcase695×532 138 KB

Badge

badge_showcase
badge_showcase1164×325 188 KB

Checkbox

checkbox_showcase

Progress Bar

Slider

Getting Started

FusionComponents is available on Wally here.

An extensive guide on how to get started can be found in the documentation.

Documentation

The documentation for FusionComponents provides info on every component and its properties. It can be found here.

The repository for the documentation can be found here. Because it hosts the documentation for multiple projects, it is a separate repository.

Links

GitHub repository - GitHub - VirtualButFake/fusion-components: 31 beautiful modern components for Fusion 0.2.
Documentation - FusionComponents
Wally - Wally

19 Likes
#2

Recently started using Fusion and these all look amazing, good work!

Are you planning to add more in the future?

#3

If there’s demand for new components, I’ll definitely consider adding them. However, I don’t currently have plans to add more, as I’ve implemented everything I wanted and am out of ideas. I may port utility components that have proven useful across multiple projects into this library at some point.

#4

Wow these are beautiful components! The documentation is very well made. Will definitely be using these :call_me_hand:

#5

Is there plugin support for these? I got the slider to show up on my plugin but can’t seem to get it to actually slide.

#6

Yes, however, you need to create a new layer using the TopLayerProvider in order for it to function properly. Components that require a layer will have a requires layer tag in the title.

#7

Well yea, I did this I just can’t seem to drag the slider at all everything else functions.

#8

Are you sure that the layer is properly used? See the popover documentation’s UI demo code for an idea of how you should structure it. This is the only real cause I can think of; if you can verify this for me and it still occurs, please create an issue on the GitHub repository with reproduction code.

#9

Alright, ill test this out soon and keep you updated thx

#10 

topLayerProvider = FusionUtil.topLayerProvider.new(New "Frame" {
	Name = "RPM_Slider_Container",
	BackgroundColor3 = Color3.fromRGB(43, 44, 50),
	BorderColor3 = Color3.fromRGB(0, 0, 0),
	BorderSizePixel = 0,
	Position = UDim2.fromScale(0.0324, 0.865),
	Size = UDim2.fromScale(0.915, 0.0857),
	ZIndex = 1,  -- Adjusted ZIndex to 1

	[Children] = {
		New "UICorner" {
			Name = "UICorner",
			CornerRadius = UDim.new(0.08, 0),
			--ZIndex = 1,
		},
		Slider.slider({
			Color = "green",
			Min = 0,
			Max = 300,
			Tooltip = true,
			Value = 40,
			Width = UDim.new(1, 0),

		}),

		New "TextLabel" {
			Name = "RPM_Value",
			BackgroundColor3 = Color3.fromRGB(80, 79, 98),
			BackgroundTransparency = 1,
			BorderColor3 = Color3.fromRGB(0, 0, 0),
			BorderSizePixel = 0,
			FontFace = Font.new(
				"rbxasset://fonts/families/Roboto.json",
				Enum.FontWeight.Heavy,
				Enum.FontStyle.Normal
			),
			Position = UDim2.fromScale(0.8, -0.1), -- Adjusted position to align with slider
			Size = UDim2.fromScale(0.2, 1.1), -- Adjusted size to align with slider
			Text = "720",
			TextColor3 = Color3.fromRGB(255, 255, 255),
			TextSize = 14,
			ZIndex = 3, -- Ensure it's on top of the slider
		},
	}
}),
#11

Got it! The issue occurs here because the top layer attempts to copy the size of the original frame, but because you’re using scale, it shrinks until it’s 0, 0. In order to fix this, I’d wrap the entire application in a top layer (so, the entire plugin frame), where it would work correctly. If you need help with this, feel free to send me a DM on here! I’ve documented this here, sorry for the trouble!

#12

hi this cool could u transfer it over to fusion 3?