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.
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.
yarn build- Builds the UI library
yarn watch- Builds the UI library whenever a file changes
yarn lint- Lints the code
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.
- Always use our internal
./src/lib/forward-ref.tswhen exporting components. This will ensure that the
- Use the
ColorPropfor sizes and colors.
- Make your component accessible.
- Put the component in
./src/components/your-component/index.tsxand export it from
- Follow the documentation guidelines.
To make sure that the user of this library can pass refs to our components you need to export your new component using
forwardRef. You can read more on forwarding refs in the react docs.
Ideally your component should support the
as prop, so that the user can change the element of your component. This is really useful when you want a button to be a link or an avatar to be a button.
To support this you need to use our internal
forwardRef function from
These are internal components found in
./src/lib/pixby.ts that just creates the basic HTML element you choose. This is used to support the
as prop without having to use Reacts
SyntaxError: Unexpected token (1:8) 1 : return () ^
Use the pixby component that matches the default component you export. So if your main wrapper is a button, use
<pixby.button>, and always pass
Once you have your component ready to be documented, add a file in
docs/components/[your-component].mdx, and then put it the sidebar by adding it to
If you want to use the React Live plugin (highly recommended), you also need to add your component to its scope in
To make it easy for the reader to know where things are, we try to follow a strict structure.
Use local version of
@pixby/ui in another project#
Sometimes you want to make changes to the components and see how they work in another project. To work with a local version of
@pixby/ui in another project do the following:
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.
If you get errors related to React hooks when linking, it might be that you have multiple version of React (one for the local @pixby/ui package and one for your own project).
In that scenario, please use
yalc, or make sure you are running the same version of React as your local @pixby/ui.