@pixby/ui

Pixby UI is a UI library built on top of Tailwind CSS. You can read more about the project here; https://pixby-ui.vercel.app.

Folder structure

The two most important folders in this project are:

• /src - The source code for all the components
• /website - The code that powers this documentation website

The documentation website is powered by docusaurus.

Contributing

The repo consists of two projects – the UI library (located in the root) and the documentation website (located in ./website). Both have their own package.json file and their own commands.

Root folder

• yarn build - Builds the UI library
• yarn watch - Builds the UI library whenever a file changes
• yarn lint - Lints the code

In ./website

• yarn dev - Starts docusaurus
• yarn build - Creates a production build of docusaurus
• yarn serve - Serves the production build of docusaurus

If you want to bring up this documentation page simply run yarn dev in ./website. This will allow you to browse, but also develop components.

Quick start guide

1. Install Tailwind CSS

Pixby UI is a UI library built on top of Tailwind CSS, and therefore it requires you to install [Tailwind CSS] first. Please follow the installation instructions provided here.

2. Install package

# yarn
yarn add @pixby/ui

# npm
npm install @pixby/ui

3. Update tailwind.config.js

@pixby/ui uses some custom theme properties that you have to add:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#ED6489',
          50: '#FFFFFF',
          100: '#FFFFFF',
          200: '#FDEDF1',
          300: '#F8BFCE',
          400: '#F292AB',
          500: '#ED6489',
          600: '#E83666',
          700: '#D3184A',
          800: '#A5133A',
          900: '#770E2A',
        },
      },
    },
  },
};

4. Import components

You should now be able to use the library:

import { Button } from '@pixby/ui';

Use local version of @pixby/ui in another project

To work with a local version of @pixby/ui in another project do the following:

cd ~/projects/pixby-ui
yarn link

cd ~/projects/your-awesome-project
yarn link @pixby/ui

cd ~/projects/pixby-ui
yarn watch

If you do the above, any change you do to @pixby/ui will now be built and reflected in your project. You can of course use npm link / yalc or whatever is your preference for linking.