3.1.4 • Published 12 months ago

@uireact/foundation v3.1.4

Weekly downloads
-
License
GNU
Repository
-
Last release
12 months ago

@UiReact

UiReact icon

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.

3.1.3

12 months ago

3.1.2

12 months ago

3.1.4

12 months ago

3.1.1

1 year ago

3.1.0

1 year ago

3.0.3

1 year ago

3.0.2

1 year ago

3.0.1

1 year ago

2.9.4

1 year ago

2.9.3

1 year ago

2.9.2

1 year ago

2.8.0

1 year ago

2.9.1

1 year ago

2.7.0

1 year ago

2.9.0

1 year ago

2.6.0

1 year ago

2.5.0

1 year ago

1.2.0

2 years ago

1.4.3

2 years ago

1.6.0

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

2.2.0

2 years ago

2.0.2

2 years ago

2.4.0

2 years ago

2.0.1

2 years ago

1.1.1

2 years ago

1.7.0

2 years ago

1.5.0

2 years ago

1.3.0

2 years ago

2.3.0

2 years ago

2.1.0

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.4

2 years ago

0.14.1-alpha.17

2 years ago

1.0.3

2 years ago

0.17.2

2 years ago

0.17.3

2 years ago

0.17.4

2 years ago

0.15.0

2 years ago

0.15.1

2 years ago

0.17.0

2 years ago

0.17.1

2 years ago

1.1.0

2 years ago

0.14.1

2 years ago

0.16.0

2 years ago

0.14.2

2 years ago

0.14.1-alpha.19

2 years ago

0.11.0

2 years ago

0.12.0

2 years ago

0.13.0

2 years ago

0.14.0

2 years ago

0.10.0

2 years ago

0.9.0

2 years ago

0.7.2

2 years ago

0.5.4

2 years ago

0.8.0

2 years ago

0.7.1

2 years ago

0.5.3

2 years ago

0.5.5

2 years ago

0.7.0

2 years ago

0.5.2

2 years ago

0.6.0

2 years ago

0.5.1

2 years ago

0.3.9

3 years ago

0.3.10

3 years ago

0.3.6

3 years ago

0.3.5

3 years ago

0.3.8

3 years ago

0.3.7

3 years ago

0.5.0

3 years ago

0.4.0

3 years ago

0.3.4

4 years ago

0.3.3

4 years ago

0.3.2

4 years ago

0.3.0

4 years ago

0.3.1

4 years ago

0.2.6

4 years ago

0.2.5

4 years ago

0.2.4

4 years ago

0.0.3

4 years ago