@uireact/foundation v3.1.4
@UiReact
This is a React UI library, that defines a customizable theme object that powers all colorations, texts, sizes, etc.. Across your react application.
We are built using framer-motion for great animations and styled-components for easy CSS management.
You should visit our docs page for all information @uireact docs.
@uireact/foundation
Foundation package for @UiReact library, this package holds the core functionality that is shared across the multiple components in the library.
How to use library
There are 5 steps you need to get your project up and running using our library:
1. Get a React project working
Doc: https://react.dev/learn/start-a-new-react-project#nextjs-pages-router, Yes, we suggest you use Next JS.
2. Install our peer dependencies
npm i -S framer-motion styled-components
We suggest using framer motion v11 and upwards, and styled components version 6 and upwards.
3. Get styled components working on your project.
If you are using Next JS this is very simple. CSS-in-JS Next Js
If you are using Remix Styled-Components example
4. Install foundation and view component
npm i -S @uireact/foundation @uireact/view
If you want to read more about the view package you can visit its docs page @uireact/view.
5. Wrap your react tree in UiView component
You need to wrap your react tree in our UiView component like this:
import { ThemeColor, DefaultTheme } from '@uireact/foundation';
import { UiView } from '@uireact/view';
const App = ({ children }) => (
<UiView theme={DefaultTheme} selectedTheme={ThemeColor.dark}>
{children}
</UiView>
);
And there you have it! You should be up and running now. There are multiple things you can customize to make this even better:
Create your theme
We have a tool dedicated to the creation of theme that you can customize the colorations. Create your theme
Components in this package
As part of this package we export <UiViewport />
and <UiSpacing />
as they are commonly used in all components.
UiViewport
This component allows you to mount / unmount components based on the user's viewport. UiViewport docs.
UiSpacing
This components access the spacing properties in the theme object and exposes them through a prop that can be set so the component renders padding / marging as needed. UiSpacing docs.
Why are spacing part of the theme?
This was made this way to try to keep a cohesive experience in the web application. A lot of times there is not control over spaces and the web applications can feel a bit misaligned and not consistent. With this approach we tried to bring consistency.
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago