UIShelf (Archived) - Create Modern & Intuitive Topbar Icons

[VSCPlays]

I only made one button but it created two instead of one

[WinnersTakesAll (Winnerz)]

It seems like the playground is broken

[2jammers]

Alright, I fixed the playground, updated it a bit, and you can also now copy the testing place @VSCPlays

[oddcraft18]

@2jammers

are available for Topbar+ but are very inaccurate and buggy sometimes

Yes, themes suck, you need mods for it to work.

@2jammers

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.

They are inactive, but others can help in the meantime.

@2jammers

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!

Wow that left beta fast!

@2jammers

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

Not so sure 'bout that…

@2jammers

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

Huge W

@2jammers

excluding unibars (will come at a later date).

Damn whoever updates TBP gotta go fast to keep up!

@2jammers

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.

That’s legit every topbar mod xD

---

I was gonna give a conclusion but don’t know what to say… anyway…

To conclude this post: Doni Bobes.

[2jammers]

@oddcraft18

Not so sure 'bout that…

tell me why, then please! ————

[ibemember3 (ibe)]

Any plans to add this to Wally?

[2jammers]

Likely soon, I hope to port most of my packages to wally.

[Scriptifi (scriptifyy)]

Quick question where do y’all get these icons that match with the other roblox core icons?

[WinnersTakesAll (Winnerz)]

While testing out UIShelf I’ve seemed to run into some issues and bugs. Below I’ve documented them.

---

Broken Tooltips

The tooltip hints seem to be broken. The key decoration seems to be not scaling properly.

Here is what is is supposed to look like.

---

Selection Box Inconsistency

The selection box very nice (better than default), but don’t really match the Roblox UI which shows a cool gradient outline.

Roblox’s selection box

UIShelf’s selection box

Controller Selection Inconsistency

---

Other than that, great module. Keep up the good work.

[2jammers]

@WinnersTakesAll @ibemember3

UIShelf is now available on Wally at the top of the post.

[flowAces (Ashley)]

hey, just letting you know that the documenation is giving a 404 error

[2jammers]

I’m aware. This is part of moving the documentation away from CanaryEngine

[2jammers]

I updated the post and it now contains the new docs site

[AridTheDev (Arid)]

Pretty sure you still didn’t change the one in the post…

[2jammers]

Alright I fixed it once again, thanks for telling me

[mapleflavouredk9]

Love this so much and am using this for a project.

One small critique is, the hover effect doesn’t quite look the same.

(Also, having to implement a custom FFlag checker to see if UIShelf should be ran or a custom top bar module should be ran kind of defeats the purpose of “Out of the Box” introduced by TopBar+.) It would be nice if this supported both old and new CoreGuis.

[2jammers]

@mapleflavouredk9

One small critique is, the hover effect doesn’t quite look the same.

This is intentional, I believe that only unibars have this selection type.

@mapleflavouredk9

(Also, having to implement a custom FFlag checker to see if UIShelf should be ran or a custom top bar module should be ran kind of defeats the purpose of “Out of the Box” introduced by TopBar+.

The issue with UIShelf was that this is made for new UI, not old. There are older versions of this available dating back to only a couple months ago, but these do not support newer API patterns.

@mapleflavouredk9

It would be nice if this supported both old and new CoreGuis.

Well yes this would be nice, it wouldn’t be possible as the newer APIs are specifically catered towards the new UI designs.

[RobIoxArenaEvents]

@WinnersTakesAll

Broken Tooltips

The tooltip hints seem to be broken. The key decoration seems to be not scaling properly.

The tooltip in UIShelf isn’t necessarily supposed to be a 1 to 1 recreation of the one in Chrome, but I agree the key decoration needs to be adjusted.

@WinnersTakesAll

Selection Box Inconsistency

The selection box very nice (better than default), but don’t really match the Roblox UI which shows a cool gradient outline.

Funny thing about this I’d like to note. The selection component is reused from UIBlox which is also ironically reused in Universal App. I think this could be easily recreated.

On another note:
I’ve been spending a lot of my time trying to reverse engineer the Chrome code in order to make something kind of like the Unibar for UIShelf. It’s still a work in progress though and I’d like to note that the Chrome code for Unibar is extremely specific for it’s needs.

[0Tenth (Lychee)]

@WinnersTakesAll

Selection Box Inconsistency

The selection box very nice (better than default), but don’t really match the Roblox UI which shows a cool gradient outline.

Roblox’s selection box

UIShelf’s selection box

Test of UIBlox selection. I’ll try to incorporate this into the UIShelf and see how it goes.

[2jammers]

Don’t worry about it. The latest update features both of these fixes, currently it’s o key published on Wally but I acknowledge that it’s not on Roblox yet.