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