@omakase-ui/react
v0.0.3
Published
[![Twitter: ThaddeusJiang](https://img.shields.io/twitter/follow/ThaddeusJiang.svg?style=social)](https://twitter.com/ThaddeusJiang)
Downloads
8
Maintainers
Readme
@omakase-ui/react
You don't need to install this npm if you have lots of time to code and want to build the unique UI.
What is Omakase UI baseUI?
- without big external dependencies, like: react-table, downshift.
- beautiful styling.
- out of box utils of UIUX.
Common
Button
Recommend daisyUI
Icon
Recommend heroicons v1 and sodaicons
sodaicons supports Highlight colorful icons, just like:
We recommend make all icons as button, apply :hover, :focus and other styles.
Typography
Layout
Divider
- [ ] left and right align
- [ ] divider-solid divider-dotted divider-dashed divider-double
Grid
Layout
Space
Navigation
Affix
Breadcrumb
Dropdown
Menu
PageHeader
Pagination
- [] provide utils for pagination
Steps
Data Entry
AutoComplete
Cascader
Checkbox
DatePicker
Recommend HTML
<input
type="date"
id="start"
name="trip-start"
value="2018-07-22"
min="2018-01-01"
max="2018-12-31"
/>
<input
type="datetime-local"
id="meeting-time"
name="meeting-time"
value="2018-06-12T19:30"
min="2018-06-07T00:00"
max="2018-06-14T00:00"
/>
others
Form
Input
HTML native input should learn again
InputNumber
Mentions
Radio
Recommend daisyUI
Rate
Select
complex select and combobox recommend to use react-select
Slider
Switch
Recommend daisyUI Toggle
daisyUI Swap is super cool, you should try it.
TimePicker
<input
type="datetime-local"
id="meeting-time"
name="meeting-time"
value="2018-06-12T19:30"
min="2018-06-07T00:00"
max="2018-06-14T00:00"
/>
<input type="time" id="appt" name="appt" min="09:00" max="18:00" required />
❌Transfer
Never use this UI
TreeSelect
Upload
Data Display
Avatar
Badge
Calendar
Card
Carousel
Collapse
Comment
Descriptions
Empty
Image
List
Popover
Segmented
Statistic
Table
Tabs
Tag
Timeline
Tooltip
We recommend HTML tooltip
<div title="CoolTip">
<p>Hovering here will show "CoolTip".</p>
<p title="">Hovering here will show nothing.</p>
</div>
- no JS (Must)
- no CSS (Optional, don't over styling.) confirm you didn't make a bug tweet
Tree
Feedback
Alert
Drawer
Message
Recommend react-hot-toast
Modal
Recommend Radix Alert Dialog and Radix Dialog
Why: We love self control dialog component, we don't want to write a lot of State for
isOpen
andsetIsOpen
Why we don't use daisyUI Modal? We need accessibility.
KnowHow
Radix Alert Dialog
for confirmRadix Dialog
for asynchronous form submission
Notification
Popconfirm
Progress
Result
Skeleton
Spin
Other
Anchor
BackTop
ConfigProvider
Mockup
Code
Phone
Window
BTW, we recommend to not mock up Phone and Window. Welcome to try @omakase-ui/react-responsive-design-mode