Backstube/bookkeeping

Watch

Fork 0

React component library evaluation #10

New issue

Open

opened 2026-05-02 10:23:43 +02:00 by daniel · 6 comments

daniel commented

2026-05-02 10:23:43 +02:00

Owner

It is planned to use UIKit as component library. However, all UIKit components need to be converted into react components.
The goal of this issue is to implement some of the basic components and see, how well this works. Also a small investigation into how easy it is to create a custom theme. The amount of icons should be sufficient, but finding new ones that fit the style might be hard.
Someone already ported UIKit to React so this can be used as a starting point. As it is pretty outdated we won't be using it directly however.

Alternatively the most common React component library is MUI. If UIKit seems to combersome or limited, MUI might be the way to go.

It is planned to use [UIKit](https://getuikit.com/docs/introduction) as component library. However, all UIKit components need to be converted into react components. The goal of this issue is to implement some of the basic components and see, how well this works. Also a small investigation into how easy it is to create a [custom theme](https://getuikit.com/docs/sass#create-a-uikit-theme). The amount of icons should be sufficient, but finding new ones that fit the style might be hard. Someone already ported [UIKit to React](https://www.npmjs.com/package/uikit-react) so this can be used as a starting point. As it is pretty outdated we won't be using it directly however. Alternatively the most common React component library is [MUI](https://mui.com/). If UIKit seems to combersome or limited, MUI might be the way to go.

daniel added a new dependency

2026-05-02 10:23:50 +02:00

#7 React component library

daniel added the

Reviewed

Confirmed

Kind/Investigation

labels

2026-05-02 10:24:41 +02:00

chriwip was assigned by daniel

2026-05-09 11:06:27 +02:00

daniel commented

2026-05-09 11:12:56 +02:00

Author

Owner

Best would probably be to follow this order:

Container
Section
1. Ignore image background sections
List
1. Components: List + ListItem
Button
1. Ignore button group
2. Ignore Dropdown
Notification
1. This will be probably the most complicated of the components in this list but should be a nice exercise.

Best would probably be to follow this order: 1. [Container](https://getuikit.com/docs/container) 2. [Section](https://getuikit.com/docs/section) 1. Ignore image background sections 3. [List](https://getuikit.com/docs/list) 1. Components: List + ListItem 4. [Button](https://getuikit.com/docs/button) 1. Ignore button group 2. Ignore Dropdown 5. [Notification](https://getuikit.com/docs/notification) 1. This will be probably the most complicated of the components in this list but should be a nice exercise.

daniel commented

2026-05-09 11:15:08 +02:00

Author

Owner

I looked a bit into what needs to be done in order to really use UIKit with react. Even when slowly building up the number of components we use, it will probably be a lot of work and error prone.

We will almost certainly use MUI instead. This issue should be done nonetheless as an exercise in working with React and getting a feel for how things work.

I looked a bit into what needs to be done in order to really use UIKit with react. Even when slowly building up the number of components we use, it will probably be a lot of work and error prone. We will almost certainly use MUI instead. This issue should be done nonetheless as an exercise in working with React and getting a feel for how things work.

daniel added this to the Development project

2026-05-10 09:35:25 +02:00

chriwip commented

2026-05-23 10:30:54 +02:00

Member

Maybe https://getbootstrap.com/ could be used as a component library? @daniel

daniel commented

2026-05-24 14:22:42 +02:00

Author

Owner

We could use it, but I am not a big fan of the look of bootstrap.

I would either go with MUI or even Carbon. Carbon is made by IBM and has the benefit of having built in components for charts.

MUI is probably the most common one as it is inspired by Googles MaterialUI design language, also used for Android. Carbon is made by IBM and is their custom design language which I personally also like the look of. Both are roughly equal I think, so it comes more down to personal preference. Bootstrap looks more like an older version of MaterialUI.

But all three have native react versions, so it should be much easier to actually use them compared to UIKit

We could use it, but I am not a big fan of the look of bootstrap. I would either go with [MUI](https://v7.mui.com/material-ui/all-components/) or even [Carbon](https://carbondesignsystem.com/components/overview/components/). Carbon is made by IBM and has the benefit of having built in components for charts. MUI is probably the most common one as it is inspired by Googles MaterialUI design language, also used for Android. Carbon is made by IBM and is their custom design language which I personally also like the look of. Both are roughly equal I think, so it comes more down to personal preference. Bootstrap looks more like an older version of MaterialUI. But all three have native react versions, so it should be much easier to actually use them compared to UIKit

daniel commented

2026-05-24 14:23:20 +02:00

Author

Owner

@chriwip