Foundation
Main View
Components
Charts
Dialogs
Framer Animations
Forms
Grids
Typography
Utils
Welcome to @UiReact docs
@UiReact is a themed library of react components for react web applications that are built with SCSS and framer motion. These components are ready to use 2 colorations for light and dark themes.
There are also a few tools exported from this library that will help your React development.
Automatic setup ✨
This is the suggested approach for brand new projects:
Next JS
Remix
This script will generate a working project with everything you need set up in the folder you execute it.
Manual setup 🛠️
Select the package manager you will be using:
Make sure you also install the peer dependencies used throutout the library:
We suggest you use Next JS orRemix for your react app. The both have They both have natively support for CSS imports so integration is very simple.
Create a wrapper component that is used to wrap your views and use the UiView like this:
import React from 'react';
import { UiView } from '@uireact/view';
export const MyWrapper = ({ children }) => (
<UiView selectedTheme={ThemeColor.light}>
{children}
</UiView>
);
Include style files to your global CSS file
@uireact provides with a default theme so you can use it or create your own.
Import the foundation css file which holds the default theme and all styles from all packages into your global styles file:
// In CSS: Update the route based on your project.
@import url('../node_modules/@uireact/foundation/dist/index.css');
// Include all packages styles
@import url('../node_modules/@uireact/view/dist/index.css');
If you used the automatic script there will be a global.css file with some imports already there.
@UiReact brings a default theme that can be used for your web app, however if you want to customize colors, fonts, sizes, etc... Then you can create your own theme
Create theme