[Feature] Utilize an existing component library to replace loot-design components #262

New Issue

2026-02-28T18:54:37-06:00

GiteaMirror commented

2026-02-28 18:54:37 -06:00

Originally created by @gsumpster on GitHub (Feb 4, 2023).

Verified feature request does not already exist?

I have searched and found no existing issue

💻

Would you like to implement this feature?

Pitch: what problem are you trying to solve?

Hey! I wanted to kick off some discussion around how we can replace some of the existing generic front-end components with those from an existing library. This is directly related to this note in the Contributing.md file here: https://github.com/actualbudget/actual/blob/bc3bb6f2812d2f9f17a2ea8d9cf7c37894b95e88/CONTRIBUTING.md#adopt-an-existing-component-library

I think it'd be great to establish consensus on what we're looking for in terms of component libraries and what are some components that we'd like to target.

Describe your ideal solution to this problem

I personally love the approach that both react-aria and Radix take. I don't have any personal experience with react-aria but I do with Radix and found it super nice to use.

As far as target components, I'm relatively new to the codebase but I think the Tooltip component is potentially a good one (though potentially split into multiple components to avoid overloading it – what is a Tooltip, anyway 😉). Autocomplete is another one that I believe we could dramatically simplify by changing existing implementations to use a different 'core' component.

Originally created by @gsumpster on GitHub (Feb 4, 2023). ### Verified feature request does not already exist? - [X] I have searched and found no existing issue ### 💻 - [X] Would you like to implement this feature? ### Pitch: what problem are you trying to solve? Hey! I wanted to kick off some discussion around how we can replace some of the existing generic front-end components with those from an existing library. This is directly related to this note in the `Contributing.md` file here: https://github.com/actualbudget/actual/blob/bc3bb6f2812d2f9f17a2ea8d9cf7c37894b95e88/CONTRIBUTING.md#adopt-an-existing-component-library I think it'd be great to establish consensus on what we're looking for in terms of component libraries and what are some components that we'd like to target. ### Describe your ideal solution to this problem I personally love the approach that both react-aria and Radix take. I don't have any personal experience with react-aria but I do with Radix and found it super nice to use. As far as target components, I'm relatively new to the codebase but I think the `Tooltip` component is potentially a good one (though potentially split into multiple components to avoid overloading it – what is a Tooltip, anyway 😉). `Autocomplete` is another one that I believe we could dramatically simplify by changing existing implementations to use a different 'core' component.

GiteaMirror added the tech debt label 2026-02-28 18:54:37 -06:00

GiteaMirror closed this issue

2026-02-28 18:54:37 -06:00

GiteaMirror commented

2026-02-28 18:54:38 -06:00

@j-f1 commented on GitHub (Feb 4, 2023):

Those both look great! And they seem like they’re unstyled, so the UI can keep its existing looks. Radix seems to be from a startup (WorkOS) while React Aria is by Adobe. I don’t really know what that means in term of future lifespan (since I could easily see WorkOS going under in a few years, or Adobe abandoning React). I haven’t used either so I don’t have any opinions in that area.

@j-f1 commented on GitHub (Feb 4, 2023): Those both look great! And they seem like they’re unstyled, so the UI can keep its existing looks. Radix seems to be from a startup (WorkOS) while React Aria is by Adobe. I don’t really know what that means in term of future lifespan (since I could easily see WorkOS going under in a few years, or Adobe abandoning React). I haven’t used either so I don’t have any opinions in that area.

GiteaMirror commented

2026-02-28 18:54:38 -06:00

@gsumpster commented on GitHub (Feb 5, 2023):

Yep, definitely a valid concern with regard to lifespan. It's worth mentioning that Radix is used by some relatively large startups (Linear, Vercel, etc), but I think trying to make judgements on either is difficult either way.

I think with either library, we'll end up running into situations where one doesn't fit in quite the way we want it to, for example, I think if we were to stick with react-aria, we'd need to look elsewhere for a Tooltip implementation, and I'm sure the same will apply with Radix. Maybe the focus here is less about which library, and how can we generally reduce the amount of code that has to be maintained with the Actual codebase. For both the Tooltip and Autocomplete components, there's a lot in there that something like react-popper or react-select could replace.

With that said, after taking a closer look at both, I think a combination might be the best way to go with these things. Radix offers a somewhat larger set of functional components, whereas I think react-aria provides a better set of utilities for managing things like keyboard shortcuts and focus.

@gsumpster commented on GitHub (Feb 5, 2023): Yep, definitely a valid concern with regard to lifespan. It's worth mentioning that Radix is used by some relatively large startups (Linear, Vercel, etc), but I think trying to make judgements on either is difficult either way. I think with either library, we'll end up running into situations where one doesn't fit in quite the way we want it to, for example, I think if we were to stick with react-aria, we'd need to look elsewhere for a Tooltip implementation, and I'm sure the same will apply with Radix. Maybe the focus here is less about which library, and how can we generally reduce the amount of code that has to be maintained with the Actual codebase. For both the Tooltip and Autocomplete components, there's a lot in there that something like react-popper or react-select could replace. With that said, after taking a closer look at both, I think a combination might be the best way to go with these things. Radix offers a somewhat larger set of functional components, whereas I think react-aria provides a better set of utilities for managing things like keyboard shortcuts and focus.

GiteaMirror commented

2026-02-28 18:54:38 -06:00

@j-f1 commented on GitHub (Feb 5, 2023):

That sounds great! There are definitely a bunch of parts of the app that are fairly standard UI components (e.g. the menu buttons and some of the text fields) and others that are very much not standard (e.g. the budget and account spreadsheets).

@j-f1 commented on GitHub (Feb 5, 2023): That sounds great! There are definitely a bunch of parts of the app that are fairly standard UI components (e.g. the menu buttons and some of the text fields) and others that are very much not standard (e.g. the budget and account spreadsheets).

GiteaMirror commented

2026-02-28 18:54:38 -06:00

@j-f1 commented on GitHub (Feb 5, 2023):

It’s been bugging me for a while that the menu buttons can’t be clicked again to close the menu and that you can’t click+drag on a menu button to quickly select an item, and it seems like Radix does both of those interactions very well!

@j-f1 commented on GitHub (Feb 5, 2023): It’s been bugging me for a while that the menu buttons can’t be clicked again to close the menu and that you can’t click+drag on a menu button to quickly select an item, and it seems like Radix does both of those interactions very well!

GiteaMirror commented

2026-02-28 18:54:39 -06:00

@j-f1 commented on GitHub (Mar 5, 2023):

Related: in https://github.com/actualbudget/actual/pull/727 we found that <Tooltip> doesn’t track the position of the element it’s attached to if that element animates, but hopefully any library we switch to will handle that case

@j-f1 commented on GitHub (Mar 5, 2023): Related: in https://github.com/actualbudget/actual/pull/727 we found that `<Tooltip>` doesn’t track the position of the element it’s attached to if that element animates, but hopefully any library we switch to will handle that case

GiteaMirror commented

2026-02-28 18:54:39 -06:00

@MatissJanis commented on GitHub (Mar 23, 2023):

For inspiration: https://javascript.plainenglish.io/best-react-ui-frameworks-and-component-libraries-408df66a1f31

@MatissJanis commented on GitHub (Mar 23, 2023): For inspiration: https://javascript.plainenglish.io/best-react-ui-frameworks-and-component-libraries-408df66a1f31

GiteaMirror commented

2026-02-28 18:54:39 -06:00

@j-f1 commented on GitHub (Apr 16, 2023):

It looks like Radix UI doesn’t have support for autocomplete/combo box components, so React Aria is the one we should be using if we want to be consistent across everything.

@j-f1 commented on GitHub (Apr 16, 2023): It looks like Radix UI doesn’t have support for autocomplete/combo box components, so React Aria is the one we should be using if we want to be consistent across everything.

GiteaMirror commented

2026-02-28 18:54:40 -06:00

@trevdor commented on GitHub (Apr 16, 2023):

I’d lean toward react-aria at this point, myself, all things being equal.

I used react-aria for the mobile lists because @jlongster had mentioned it in his initial open sourcing dev notes. It worked very nicely, I thought.

James mentioned not liking their table component. Although I’ve noticed Devon Govett is doing a ton of work on react-aria, prepping a new major version. So things could change. Either way, it’s a very active lib.

@trevdor commented on GitHub (Apr 16, 2023): I’d lean toward react-aria at this point, myself, all things being equal. I used react-aria for the mobile lists because @jlongster had mentioned it in his initial open sourcing dev notes. It worked very nicely, I thought. James mentioned not liking their table component. Although I’ve noticed Devon Govett is doing a ton of work on react-aria, prepping a new major version. So things could change. Either way, it’s a very active lib.

GiteaMirror commented

2026-02-28 18:54:40 -06:00

@j-f1 commented on GitHub (Apr 16, 2023):

James mentioned not liking their table component. Although I’ve noticed Devon Govett is doing a ton of work on react-aria, prepping a new major version. So things could change. Either way, it’s a very active lib.

We could grab the table component from somewhere else or just keep our existing one in that case, while adopting the rest of the components.

@j-f1 commented on GitHub (Apr 16, 2023): > James mentioned not liking their table component. Although I’ve noticed Devon Govett is doing a ton of work on react-aria, prepping a new major version. So things could change. Either way, it’s a very active lib. We could grab the table component from somewhere else or just keep our existing one in that case, while adopting the rest of the components.

GiteaMirror commented

2026-02-28 18:54:40 -06:00

@trevdor commented on GitHub (Apr 16, 2023):

We could grab the table component from somewhere else or just keep our existing one in that case, while adopting the rest of the components.

For sure. James has called out how carefully his existing table was optimized for speed. That’s not to say no 3rd party table will cut it—there are certainly new ones out there that weren’t around back then—but obviously something to keep an eye on.

@trevdor commented on GitHub (Apr 16, 2023): > We could grab the table component from somewhere else or just keep our existing one in that case, while adopting the rest of the components. For sure. James has called out how carefully his existing table was optimized for speed. That’s not to say no 3rd party table will cut it—there are certainly new ones out there that weren’t around back then—but obviously something to keep an eye on.

GiteaMirror commented

2026-02-28 18:54:41 -06:00

@everettraven commented on GitHub (Jun 11, 2023):

Hello 👋 - I am starting to dabble with React & JS to learn something new and would be interested in helping with this. Is there a particular breakdown of the components that would be good to start with one at a time or are the Tooltip and Autocomplete ones initially mentioned by @gsumpster a good starting point?

Also just noting that I haven't even began looking at the code base, but figured chipping away at some of the smaller component changes would be a good way to get started contributing.

@everettraven commented on GitHub (Jun 11, 2023): Hello 👋 - I am starting to dabble with React & JS to learn something new and would be interested in helping with this. Is there a particular breakdown of the components that would be good to start with one at a time or are the `Tooltip` and `Autocomplete` ones initially mentioned by @gsumpster a good starting point? Also just noting that I haven't even began looking at the code base, but figured chipping away at some of the smaller component changes would be a good way to get started contributing.

GiteaMirror commented

2026-02-28 18:54:41 -06:00

@j-f1 commented on GitHub (Jun 11, 2023):

Hi! I think the tooltip could be a good place to start. We made an attempt to port the autocompletes over to a different package a few months ago and ended up ripping it all out because it just didn’t work right, so I would not recommend working on that as a starter project. That said, porting the tooltips would be a fairly large task since they are used pervasively for lots of different effects so you may want to start off on another, smaller issue.

@j-f1 commented on GitHub (Jun 11, 2023): Hi! I think the tooltip could be a good place to start. We made an attempt to port the autocompletes over to a different package a few months ago and ended up ripping it all out because it just didn’t work right, so I would not recommend working on that as a starter project. That said, porting the tooltips would be a fairly large task since they are used pervasively for lots of different effects so you may want to start off on another, smaller issue.

GiteaMirror commented

2026-02-28 18:54:42 -06:00

@everettraven commented on GitHub (Jun 11, 2023):

@j-f1 Thanks for the response and additional information! I was looking around the code a bit more and I'll plan to try and find a component that is smaller task. I was taking a look and something like the DateSelector seems fairly straightforward to port over to an existing component library. Is that a component that you think would be good to start with?

@everettraven commented on GitHub (Jun 11, 2023): @j-f1 Thanks for the response and additional information! I was looking around the code a bit more and I'll plan to try and find a component that is smaller task. I was taking a look and something like the `DateSelector` seems fairly straightforward to port over to an existing component library. Is that a component that you think would be good to start with?

GiteaMirror commented

2026-02-28 18:54:42 -06:00

@j-f1 commented on GitHub (Jun 11, 2023):

@everettraven That’s a good option!

@j-f1 commented on GitHub (Jun 11, 2023): @everettraven That’s a good option!

GiteaMirror commented

2026-02-28 18:54:42 -06:00

@MatissJanis commented on GitHub (Sep 23, 2024):

We've moved many things to react-aria already and plan to continue the work.

Closing this ticket, but feel free to continue discussing this.

@MatissJanis commented on GitHub (Sep 23, 2024): We've moved many things to react-aria already and plan to continue the work. Closing this ticket, but feel free to continue discussing this.