UIShelf (Archived) - Create Modern & Intuitive Topbar Icons

Hi, UIShelf has been archived in favor of using Topbar+ V3. The documentation is no longer viewable and the code is read-only. Thank you for all of the support in the last 6 months, means a lot to me our team.

Archived Post

UIShelf

v1.1.6

Get it on Wally View it on our Documentation Join our Discord server! Get it on Roblox Get it on GitHub

About :sparkles:


UIShelf is the all new way to create your topbar icons. It takes the current core gui and revamps it to be your own; while still having the same exact look and behavior. We have taken our time to carefully replicate each feature 1:1 and are confident these copies are correct. Here’s a video of each feature being displayed, and you can also check out the testing place! UIShelf Playground - Roblox

You can also take a look at the video preview:

https://www.youtube.com/watch?v=ouoLMWhtLZU

Available features :tada:


  • Element Support :package:
    Comes with support for every element, excluding unibars (will come at a later date).

  • Lightweight :weight_lifting_woman:
    No extra bloat; no performance impact and cleans up memory efficiently.

  • Maintained :wrench:
    New features and bug fixes are provided regularly unlike competitors.

  • Good API :man_technologist:
    Provides an easy to use API which is readable at a glance.

… and much more!

Is it better than Topbar+? :thinking:


In most cases yes, as said previously it’s maintained and updated regularly. There is nothing in sight that the maintainers of Topbar+ will be updating it to natively support new CoreGui anytime soon. Themes are available for Topbar+ but are very inaccurate and buggy sometimes; UIShelf provides instant support out of the box. UIShelf may not be as feature packed but that can turn into an advantage as more features = more performance impacted. And not to mention that a lot of people I have talked to say that topbar+ impacts their game’s performance, UIShelf runs in the background and does not do any other work until the topbar is updated/an interaction is made with a button. Topbar+ is an eyesore of thousands of lines of unmaintainable code and honestly in my opinion is not worth supporting a fork of. I’ve been developing software for a quite long period of time and I know that migration is hard but sometimes it is needed to escape literal spaghetti code.

Installation + Usage :open_book:


Installation is as easy as dropping the RBXM file into your place, or grabbing a version from the toolbox. From there, you can go to the next article in tutorials to learn more about how UIShelf works. If you need any additional help, feel free to reply to this post or shoot me a message on Discord.

Issues :bug:


Came across an issue in our code? Simply create a new issue on the GitHub repository tagged with the package name or create a new bug report in our discord server.

Example :stars:


Conclusion :wave:


Please share all of your feedback below! We are always looking for ways to improve our packages for all.

— Made with :heart: by Canary Softworks

[poll type=multiple results=always min=1 max=1 public=true chartType=bar]
  • Sure!
  • No thanks!
  • Maybe later!
[/ [poll ]
143 Likes

Not bad, but you already made such a topic would be good if you posted on there to prevent spam but like I care. Though this
image
kind of bugs me. As the ping frame clips the text it self and that there is a lot of space between the image and the text it self.

12 Likes

The notification clipping with the text is in fact intentional. I will be revising the padding between the text and image though.

7 Likes

Roblox update could break our topbar style, thanks canary developement for this

4 Likes

Updated it to fix a few bugs, change padding and allow test only icons.

3 Likes

Any chance we’ll see support for a custom Unibar? (The name of button with the bar that pops out from the left)

If nobody else would work on it, then perhaps I could work on it? I’ve been reverse engineering how the Unibar works and trying to make it compatible without needing any external libraries like Roact or confidential code.

3 Likes

Well done, lolmans.

Yet another simple, and user-end friendly resource.

3 Likes

I’ve tried to add stuff to the menu by checking the size of TopbarInset; but it’s very hacky. If you message me I might be able to share more details

2 Likes

Is this ment to happen?

3 Likes

really cool stuff! i can see a ton of people use this in the future when roblox forces people to use the new topbar!

8 Likes

It only works if you are using the new topbar. You need to flip a few fflags to test it in-game.

3 Likes

Yep! Always try to design things at the developer standpoint, while mixing it with my own vision. It’s apparent the method is successful in my works.

3 Likes

Great start, although It would be nicer to make images optional, and a function to update the texts only

5 Likes

How do you get the ‘new topbar’?

4 Likes

You can enable it via the beta features window in the studio.


Where do I find it?

  1. To access it you first go into the Files panel.
    image

  2. Next, click on Beta Features.
    image

  3. Scroll close to the bottom and you should find Updated Roblox Controls and enable it.

3 Likes

I’ve been wanting something like this! awesome work!

Why is the icon like this?

image

What are you referring to? There are multiple elements on-screen.

i’m referring to the music buttons

I don’t see anything wrong here.

1 Like