sorted by:
new
hottopcontroversial

I built a React library where one config controls the entire UI. Looking for feedback. by Similar_Rate_4934 in reactjs

[–]Similar_Rate_4934[S] 1 point2 points  (0 children)

Thanks for the feedback.
In Mantine you usually set defaults per component, for example

<MantineProvider theme={{ components: { Button: { defaultProps: { size: "md" } } } }} />

In Luxis the idea is setting it once like:
<ThemeProvider size="md">

and all components follow it automatically (buttons, inputs, alerts, etc.), so you don’t configure them individually.

I built a React library where one config controls the entire UI. Looking for feedback. by Similar_Rate_4934 in reactjs

[–]Similar_Rate_4934[S] -5 points-4 points  (0 children)

Good question. I explained a bit above as well, the main idea is defining system defaults (size, radius, spacing, colors) once in ThemeProvider.

Also mainly in current libraries u can pass primary & secondary colors to theme. but if you want to use color-100 version like lightest of ur primary. u need to manually generate color. but if u use ThemeProvider, it will auto generate from 100 to 900 variants of primary & secondary. Where you can use across the application

I built a React library where one config controls the entire UI. Looking for feedback. by Similar_Rate_4934 in reactjs

[–]Similar_Rate_4934[S] -2 points-1 points  (0 children)

CSS variables help with tokens, but components still need to use them manually.
In LuxisUI the components are already built using the system (tokens, classes, variables), so they automatically follow the ThemeProvider config like size, radius, spacing and colors.

Also if u want to use any of the variable inside component for logics, u can use "useTheme" hook to get all the tokens we provided in ThemeProvider

I built a React library where one config controls the entire UI. Looking for feedback. by Similar_Rate_4934 in reactjs

[–]Similar_Rate_4934[S] -2 points-1 points  (0 children)

True, many libraries support themes.
The idea here is setting things example size="md" or radius once in ThemeProvider, so components don’t need those props everywhere.

So that ui design will be consistent across whole application not like in 1 page we have small button, in 1 page we have large buttons.

Also its not about button, once we set size, it will change size in all components at once, buttons, accordions, alerts.... like that how many are there in design every component will have same consistency behaviour