3.1.4 • Published 10 months ago

@uireact/foundation v3.1.4

Weekly downloads
-
License
GNU
Repository
-
Last release
10 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

10 months ago

3.1.2

10 months ago

3.1.4

10 months ago

3.1.1

11 months ago

3.1.0

11 months 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

3 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