Web can also be
@UiReact | Themed Components
Styled Components
We use styled components for CSS
đ
Framer Motion
Components animated with framer
Cards
Content
Customizable through styled components
Expandos
Components that expand to reveal content
Expand Card
Typography
Headings
Text components share styles and properties from your theme.
They can also showcase supportive colorations.
Animated 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
1. Install peer dependencies:
We suppose you already have a react environment working, we suggest you use Next JS for your react app. They also have a doc page for getting đ đŸ styled components set up in Next JS.
2. Install the foundation and view packages:
3. Set up your UiView, by wrapping your entire react tree in the UiView component
import React from 'react';
import { DefaultTheme } from '@uireact/foundation';
import { UiView } from '@uireact/view';
export const MyWrapper = () => (
<UiView theme={DefaultTheme} selectedTheme={ThemeColor.light}>
<p>View content</p>
</UiView>
);
4. Create your theme! âš
@uireact provides with a default theme so you can either use that 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.