Brand Your Storybook with a Custom Logo

[Screen: Storybook interface with default logo]

Branding your Storybook helps to integrate the design language of your project or company. Let’s add a custom logo to your Storybook workspace.

[Screen: Locate the .storybook/manager.js file]

First, open the .storybook/manager.js file. This is where you can customize the Storybook manager interface, which includes branding elements like the logo.

[Screen: Show how to import the custom logo]

If you don’t have a manager.js file, create one. Then, import your custom logo at the top of this file: import myLogo from ‘./myLogo.svg’;.

[Screen: Writing the theme customization code]

Next, create a theme object and set the brandImage property to your imported logo:

javascript Copy code import { create } from ‘@storybook/theming’;

const myTheme = create({ base: ‘light’, brandTitle: ‘My Company Storybook’, brandUrl: ’https://mycompany.com’, brandImage: myLogo, }); [Screen: Apply the theme to Storybook]

Now apply this theme to Storybook by exporting it in the manager.js file:

javascript Copy code import { addons } from ‘@storybook/addons’;

addons.setConfig({ theme: myTheme, }); [Screen: Restart Storybook to see the new logo]

Restart Storybook to apply the changes. You should now see your custom logo in the top left corner, replacing the default Storybook icon.

[Screen: Encouraging to explore further customization options]

Feel free to explore further customizations such as changing the brand title or the theme colors to match your company’s branding guidelines.

[Screen: Completed Storybook UI with custom branding]

With your new logo in place, your Storybook now carries the identity of your project or brand, creating a more cohesive development experience.