Web can also be
@UiReact | Themed Components
Framer Motion
Components animated with framer
Cards
Content
Customizable through styled components
Expandos
Components that expand to reveal content
Typography
Headings
Text components share styles and properties from your theme.
They can also showcase supportive colorations.
Animated Links
Button Links
All the texts components are controlled from the theme and can change colors, sizes
Appearance selector
User can change the theme through their device settings
Go to settings
Go to appearance
Change appearance
Light and Dark colorations
All components in the library are ready to render in these two colorations
Active theme
These are the colors for the default theme included in the UiView
Main colors
Primary | |
Secondary | |
Tertiary |
Support colors
Positive | |
Warning | |
Error | |
Negative |
Tooltips
Tooltips appear around a content on hover:
đŠ
đŠ
đł
Forms
All form components have categories to render states
Some error
Buttons with styles
Tabs
đ
đ„Š
đ„Ź
Selected đ
Badges
Menus
Component that renders underneath the trigger, click:
Dialogs
Dialogs handlers built in with the UiView component
đ„ Getting started
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
4 Simple steps to get your project up and running with @UiReact.
We suppose you already have a react environment working, we suggest you use either Next JS or Remix for your react app.
1. Install the foundation and view packages:
2. Set up UiView
You need to wrap your react tree in the UiView component
import React from 'react';
import { UiView } from '@uireact/view';
export const MyWrapper = () => (
<UiView selectedTheme={ThemeColor.light}>
<p>View content</p>
</UiView>
);
3. Link the theme! âš
@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');
4. Create your own theme! âš
@uireact provides with a default theme so you can use it or create your own. If you like the default theme then you can skip this step.
If you want to build a custom theme visit Create your own theme to learn more about it.