https://github.com/sondh0127/retail-ui

The collection of react component powered by tailwindcss
https://github.com/sondh0127/retail-ui

Last synced: 19 days ago
JSON representation

The collection of react component powered by tailwindcss

• Host: GitHub
• URL: https://github.com/sondh0127/retail-ui
• Owner: sondh0127
• Created: 2020-08-31T13:04:13.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-09-13T20:41:49.000Z (over 4 years ago)
• Last Synced: 2024-12-28T20:48:08.828Z (25 days ago)
• Language: TypeScript
• Homepage:
• Size: 2.81 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Retail UI 🛒 (Power by Tailwindcss)

A collection of accessible and reusable components for React to rapid development of gorgeous interfaces with Tailwind CSS - utility-first CSS framework.

> I'm learning setup my own the modern project of development with `monorepo` `yarn workspace`, `convention commit` `continuous integration`, `multiple braches`, `testing library` publish to `npmjs.org` and many more ...

---

## Why another UI library

The awesome feelings when developing a `React` application with `Tailwindcss` can be leveraged to another level if we have a more primitive component used in web development.

I'm lazy people, I'm wanna keep writting my Tailwindcss and React together without having to integrate other UI component, so I'm created this UI for people like me because it hard to use another UI library if we do'nt take out the fully documentation.

## Feature

With ability to easily build complex and customizable UI of tailwindcss. Retail UI built upon the following principles:

- Dark theme compatible.

- Highly customizable via `tailwindcss`.

- Provide accessible out-of-the-box (Designed to listen to the real screen reader)

- Easier to learn and access. Check our Storybook

- `Typescript` by default for safety world

---

## Installing

Yarn

```sh

yarn add tailwindcss @retail-ui/core

```

Npm

```sh

npm i tailwindcss @retail-ui/core

```

---

## Usage

**Simple tailwindcss setup**

`tailwind.config.js`

```javascript

const defaultTheme = require("tailwindcss/defaultTheme")

// Our default theme

const { resolveConfig } = require("@retail-ui/core")

module.exports = resolveConfig({

  purge: ["src/**/*.{js,jsx,ts,tsx}"], # your purge files

  // experimental: "all", # experimental tailwindcss

  theme: {

    extend: {

      fontFamily: {

        sans: ["Inter", ...defaultTheme.fontFamily.sans], # custom Font

      },

    },

  },

  variants: {},

  plugins: [],

})

```

`postcss.config.js`

```javascript

module.exports = {

  plugins: [

    'tailwindcss',

    ... # your postcss plugin

  ],

}

```

`tailwind.css`

```css

@import url('https://rsms.me/inter/inter.css'); /* Put your font */

@tailwind base;

@tailwind components;

@tailwind utilities;

```

**Wrapping our `Provider`**

Here is a sample of `Next.js` setup

Your `_app.tsx` root file

```tsx

import { ThemeProvider, defaultTheme } from '@retail-ui/core'

import { OtherProvider } from 'other-packages'

const AppProvider: React.FC = (props) => {

  const { children } = props

  return (

    

      {children}

    

  )

}

export default function App({ Component, pageProps }: AppProps) {

  return (

    

      

    

  )

}

```

**Ready to use**

```tsx

import { Button } from '@retail-ui/core'

const AwesomeComponent: React.FC = (props) => {

  return (

    


      Awesome Retail UI

    

  )

}


---

## Check list [WIP]

[TODO](TODO.md)

```