https://github.com/leye195/ownui-system

ownui-system
https://github.com/leye195/ownui-system

react tailwindcss typescript

Last synced: 20 days ago
JSON representation

ownui-system

• Host: GitHub
• URL: https://github.com/leye195/ownui-system
• Owner: leye195
• Created: 2024-03-03T13:21:51.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-11-16T16:32:37.000Z (about 2 months ago)
• Last Synced: 2024-11-16T17:26:31.686Z (about 2 months ago)
• Topics: react, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://65f30dc33d85802ff3aab6f0-spsjphvdob.chromatic.com
• Size: 993 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

- [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

- [ ] Step