ownui-design-system

- react, tailwindcss

Getting stated

$3

- install tailwind css

``


or yarn or pnpm


npm i autoprefixer postcss tailwindcss
npx tailwindcss init -p
`

- configure tailwind.config

`
const plugin = require("tailwindcss/plugin");
const { colors, twTypographyMap } = require("ownui-system");


/* @type {import('tailwindcss').Config} /
export default {
content: [
"./index.html",
"./src/*/.{js,ts,jsx,tsx}",
],
theme: {
colors,
extend: {},
},
plugins: [
plugin(function ({ addUtilities }) {
// Add your custom styles here
addUtilities(twTypographyMap, ["responsive", "hover"]);
}),
],
};

`

- add tailwind css to css file

`
@tailwind base;
@tailwind components;
@tailwind utilities;
`

$3

`
npm i ownui-system
#
yarn add ownui-system
#
pnpm add ownui-system
`

- include "./node\modules/ownui-system/dist/\\*/\_.{js,jsx,ts,tsx}" to tailwind.config content

`
/* @type {import('tailwindcss').Config} /
export default {
content: [
"./index.html",
"./src/*/.{js,ts,jsx,tsx}",
"./node_modules/ownui-system/dist/*/.{js,jsx,ts,tsx}"
],
theme: {
colors,
extend: {},
},
plugins: [
plugin(function ({ addUtilities }) {
// Add your custom styles here
addUtilities(twTypographyMap, ["responsive", "hover"]);
}),
],
};

``

UI Components

- [x] Button
- [x] Input
- [x] TextField
- [x] Spacing
- [x] Flex
- [x] Skeleton
- [x] TextArea
- [x] Text
- [x] Dimmed
- [x] Modal
- [x] Divider
- [x] PopOver
- [x] Tab / TabGroup
- [x] Badge
- [x] Checkbox
- [x] Drawer
- [x] Dropdown
- [x] Accordion
- [x] BottomSheet
- [x] Pagination
- [x] Switch
- [x] Radio / RadioGroup
- [x] InfiniteSlider
- [x] Tooltip
- [x] SnackBar
- [x] Icon
- [ ] Step