We use styled components for CSS
đ
Components animated with framer
Content
Customizable through styled components
Components that expand to reveal content
Text components share styles and properties from your theme.
They can also showcase supportive colorations.
All the texts components are controlled from the theme and can change colors, sizes
User can change the theme through their device settings
Go to settings
Go to appearance
Change appearance
All components in the library are ready to render in these two colorations
These are the colors for the default theme included in the UiView
Main colors
Primary | |
Secondary | |
Tertiary |
Support colors
Positive | |
Warning | |
Error | |
Negative |
Tooltips appear around a content on hover:
đŠ
đŠ
đł
All form components have categories to render states
Some error
đ
đ„Š
đ„Ź
Selected đ
Component that renders underneath the trigger, click:
Dialogs handlers built in with the UiView component
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.
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.
Get styled-components up and running in your project.
You need to wrap your 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>
);
@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.