This is a repository with components that I find essential to making plugins with Fusion. You'll find in the src folder that there's two folders. Each one has a specific set of components which you can learn more about below.
There's no documentation at the moment, but each component has a property type that should give you an idea of what it expects for the properties.
The usage of this library can be found in a few projects by the developer community. Here are a few plugins that use this library in some shape or form:
- Benchmarker by @boatbomber
- LampLight by @MrChickenRocket
- MeshVox by @tyridge77
These components use specific properties to create their corresponding plugin object. Afterwards, they use Hydrate on the created object and return it. You don't need to use these components, but the most useful one by far is the Widget component.
| Component | Description | Returns |
|---|---|---|
| Widget | A PluginGui that displays its contents inside a dockable Roblox Studio window. | DockWidgetPluginGui |
| Toolbar | An object used to create PluginToolbarButtons. | PluginToolbar |
| ToolbarButton | An object that allows the user to initiate a single, one-off action in Roblox Studio through the Click event. | PluginToolbarButton |
This is a Fusion port of StudioComponents by sircfenner. This is by no means a 1-1 port, but it's close enough to where you should be able to port over a plugin that uses StudioComponents with ease. There is bound to be mistakes, but hopefully those can be ironed out in the future.
| Component | Description | Returns |
|---|---|---|
| Background | A borderless Frame with a background color that matches the user's current theme. | Frame |
| Label | A simple text label following Studio style guidelines for body text. | TextLabel |
| Title | A simple text label following Studio style guidelines for title text. | TextLabel |
| BaseButton | A TextButton that reacts to different states like hover, press, and disabled. | TextButton |
| Button | BaseButton, but with a different name. | TextButton |
| MainButton | BaseButton, but uses the style of a main button, which is usually a blue background color. | TextButton |
| IconButton | A button with an image on it instead of text. | TextButton |
| Checkbox | A checkbox that reacts to different states like hover, checked, indeterminate, and disabled. | Frame |
| ClassIcon | An image of a given ClassName from the user's installed Studio icon set. | ImageLabel |
| Shadow | A subtle shadow positioned on the side of your choosing. | ImageLabel |
| Loading | An animated component to display whilst something else loads. | Frame |
| Dropdown | A button that shows the selected item and a list of items in a dropdown when clicking on it. | Frame |
| ColorPicker | An HSV color picker that uses a value slider. | Frame |
| BaseScrollFrame | A custom scrolling frame that uses Roblox's ScrollingFrame for input and padding. | Frame |
| ScrollFrame | Same as BaseScrollFrame, but has properties that will determine the CanvasSize for the BaseScrollFrame. | Frame |
| Slider | A slider that reacts to being dragged. | TextButton |
| ProgressBar | A bar that fills up with an accent color. | TextBox |
| TextInput | A TextBox that reacts to states like hover, focus, and disabled. | TextBox |
| LimitedTextInput | TextInput, but contains properties for limiting the length of input to the TextBox. | TextBox |
| VerticalExpandingList | A Frame that uses AutomaticSize for the Y axis and contains a UIListLayout. | Frame |
| VerticalCollapsibleSection | A frame that contains a header and a content frame. The content frame can be collapsed by clicking on the header. | Frame |