@thaddeusjiang/omakase-ui
v0.0.1
Published
![Version](https://img.shields.io/badge/version-0.0.1-blue.svg?cacheSeconds=2592000) [![Documentation](https://img.shields.io/badge/documentation-yes-brightgreen.svg)](https://github.com/ThaddeusJiang/omakase-ui#readme) [![Maintenance](https://img.shields
Downloads
8
Maintainers
Readme
Welcome to @thaddeusjiang/omakase-ui 👋
- Maybe you shouldn't use this library, just use tailwindcss and HTML is enough.
- You don't need to use this library if you have lots of time to code and want to build the unique UI.
Features
- out of box utils of UIUX.
- beautiful default styling.
- without big external dependencies, like: @tanstack/table, Downshift and Tippy.js etc.
🏠 Homepage
Install
yarn add @thaddeusjiang/omakase-ui
Components
- Welcome to @thaddeusjiang/omakase-ui 👋
- Components
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
<Pagination start={1} end={10} total={10015} currentPage={1} totalPage={101} onChangePage={onChangePage} />
Steps
Data Entry
AutoComplete
~~Cascader~~
🙅♂️ Don't use this UI.
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
https://daisyui.com/components/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
Useful
LoadingIcon
ScreenLoading
SectionLoading
DataNotFound
Run tests
yarn run test
Develop
yarn storybook
Author
👤 Thaddeus Jiang
- Website: https://thaddeusjiang.com/
- Twitter: @ThaddeusJiang
- Github: @ThaddeusJiang
🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Show your support
Give a ⭐️ if this project helped you!
📝 License
Copyright © 2022 Thaddeus Jiang.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator