Skip to content

Latest commit

 

History

History
114 lines (95 loc) · 1.78 KB

README.md

File metadata and controls

114 lines (95 loc) · 1.78 KB

ownui-design-system

  • react, tailwindcss

Getting stated

setup tailwind css

  • 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;

install package

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

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