ownui-system

A React-based UI component library built with Tailwind CSS and Framer Motion.

Getting Started

1. Install the package

Install the ownui-system package along with its peer dependencies.

npm install ownui-system
# or
yarn add ownui-system
# or
pnpm add ownui-system

2. Setup Tailwind CSS

If your project doesn't have Tailwind CSS set up yet, install the necessary dependencies:

npm install -D autoprefixer postcss tailwindcss
npx tailwindcss init -p

3. Configure tailwind.config.js

You need to include the library's paths in your content array so Tailwind can process the styles. Also, include the colors and twTypographyMap plugins provided by ownui-system.

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}",
    // Important: Include ownui-system dist to purge classes correctly
    "./node_modules/ownui-system/dist/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    colors, // Injects ownui-system default colors
    extend: {},
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      // Add custom typography utilities
      addUtilities(twTypographyMap, ["responsive", "hover"]);
    }),
  ],
};

4. Add Tailwind CSS Directives

Add the basic Tailwind directives to your global CSS file (e.g., index.css or global.css):

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

Available UI Components

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