README
@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 libraryyarn watch
- Builds the UI library whenever a file changesyarn lint
- Lints the code
./website
In yarn dev
- Starts docusaurusyarn build
- Creates a production build of docusaurusyarn 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
tailwind.config.js
3. Update @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';
@pixby/ui
in another project
Use local version of 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.