Use the component library

We use Storybook to manage the coded versions of our components.

  1. Familiarise yourself with Storybook: If you're new to Storybook, take some time to get familiar with the interface. Storybook is a tool for developing UI components in isolation. You can view and interact with each component individually, which makes it easier to test and refine your code.

  2. Get access to the Storybook-based components: Before you can start using Storybook-based components and code, you need to get access to them. This could involve downloading a code repository from GitHub or being granted access through your organisation's code repository.

  3. Install any necessary dependencies: Depending on the code repository, there may be some dependencies you need to install before you can start using the components. Check the documentation or README file for instructions.

  4. Open Storybook: Once you have the code repository and any necessary dependencies installed, open Storybook. This should be included in the code repository, and you can usually open it by running a command in your terminal.

  5. Explore the components: Once you have Storybook open, you can start exploring the components. Look at the different stories (which represent different variations of the component), and interact with them to see how they behave.

  6. Use the components in your project: To start using the Storybook-based components in your project, you'll need to import the code into your project. This will likely involve copying and pasting some code, or installing a package via a package manager like npm.

  7. Customise the components: While Storybook-based components come with pre-defined rules and styles, you may need to customise them to fit the specific needs of your project. Modify the code as necessary, and make sure to test it in Storybook to ensure it works as intended.

  8. Share your code: Once you've customised the components and integrated them into your project, share your code with your team or other stakeholders. Make sure to document any changes you made and provide clear instructions for using the components.

For a more detailed developer experience, see the Storybook site.