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
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.
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 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.