Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • React Tutorial
  • React Exercise
  • React Basic Concepts
  • React Components
  • React Props
  • React Hooks
  • React Router
  • React Advanced
  • React Examples
  • React Interview Questions
  • React Projects
  • Next.js Tutorial
  • React Bootstrap
  • React Material UI
  • React Ant Design
  • React Desktop
  • React Rebass
  • React Blueprint
  • JavaScript
  • Web Technology
Open In App
Next Article:
Intorduction to React Motion
Next article icon

Introduction and Installation of Storybook for React

Last Updated : 30 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Storybook is an open-source UI development tool that facilitates the creation of reusable, well-documented components independently. It automates visual testing to prevent bugs and runs alongside the app in development mode. Additionally, it supports server-rendered component frameworks like Ruby on Rails.

Prerequisites:

  • NodeJS or NPM
  • React JS
  • Storybook

Features:

  • Implement components and pages without needing to work on the backend, It runs independently.
  • It visually tests your components.
  • It is efficient for the developers working in a team, as one gets all the proper code and documents of the component properly structured.
  • It is free of cost and open to everyone.
  • Easy to install and to work with.
  • It works as a UI explorer.
  • Supports a wide range of tech stacks.

Steps to Create the React Application And Installing Module:

Step 1: Create the react project folder

npm create-react-app projectstorybook

Step 2: Change your directory to the newly created folder by using the following command.

cd projectstorybook

Step 3: To add storybook in your project, in your terminal write the command

npm sb init

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Let's create a component named WelcomeText that will show "Welcome to GeeksForGeeks" in two colors one is primary i,e green, and another one black named secondary. Let's create a folder named Components inside the folder create files such as WelcomeText.js,WelcomeText.css and WelcomeText.stories.js. and write the below-mentioned codes respectively.

CSS 
.heading {   font-size: 80px;   font-weight: 900; }  .primary {   color: green; }  .secondary {   color: black; }
JavaScript 
import React from 'react' import "./WelcomeText.css"  function WelcomeText (props) {     const { variant = 'primary', children, ...rest} = props     return (         <h1 className={`heading ${variant}`} {...rest}>             {children}         </h1>     ) }  export default WelcomeText
JavaScript 
import React from 'react'; import WelcomeText  from './WelcomeText';  export default{      // Mandatory and unique in     // the entire project     title: 'WelcomeText',     component: WelcomeText }  const text ="Welcome to GeeksforGeeks" export const Primary = () =>      <WelcomeText variant='primary'>{text}</WelcomeText> export const Secondary = () =>      <WelcomeText variant='secondary'>{text}</WelcomeText>

Step to run the application: Open the terminal and type the following command. 

npm run storybook

Output:



Next Article
Intorduction to React Motion
author
aniluom
Improve
Article Tags :
  • Web Technologies
  • ReactJS
  • React-Questions

Similar Reads

  • React Desktop Introduction
    React Desktop is a popular library to bring the native desktop experience to the web. This library provides macOS and Windows OS components. It is a cross-platform desktop development library. It is also compatible with electron.js and NW.js. It is mostly used in javascript-powered projects. Install
    2 min read
  • ReactJS Blueprint Introduction
    BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications. This is not a mobile-first UI toolkit. Installation: First install node.js in your machine and then install the package and it
    3 min read
  • How to Install ReactJS on Linux
    Installing ReactJS on a Linux system is the first step toward building dynamic, interactive web applications. ReactJS, a popular JavaScript library developed by Facebook, is widely used for creating user interfaces. Setting it up on Linux ensures a smooth development environment for building and run
    6 min read
  • Intorduction to React Motion
    Animation plays a vital role in modern web development, enhancing user experience and adding a layer of interactivity to web interfaces. React Motion is a popular animation library specifically designed for React applications. This article will explore React Motion in detail, covering its key featur
    4 min read
  • How to Install ReactJS on MacOS
    Are you looking to set up ReactJS on your Mac? Whether you’re using a MacBook Air, MacBook Pro, iMac, or any macOS version like Monterey, Ventura, Big Sur, or macOS 15 Sequoia, this step-by-step guide is here to help. ReactJS, the popular JavaScript library for building dynamic user interfaces, requ
    4 min read
  • React Constructor and Super Keyword
    In this article, we will learn about the React Constructor and Super keyword. In React JS constructor is used for class components not for the functional component. In React JS super call other constructor methods that is instantiated. Table of Content Constructor:Super:Constructor:In React JS const
    3 min read
  • React Suite Introduction
    React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. It is a developer-friendly UI framework. Installation: You can install it with the following command: npm i rsuite // or yarn add rsuite Now you can import suite
    3 min read
  • React Rebass Introduction
    React Rebass is a front-end framework that was designed keeping react in mind. React Rebass is built with a Styled System. It is the best choice to create prototypes and UI without needing to invest time in building a custom design system up-front. React Rebass provides us with flexible components.
    2 min read
  • Building a Component Library with React Hooks and Storybook
    Building a component library is a powerful way to streamline the development process, ensure consistency across projects, and promote the reusability of UI elements. In this article, we'll explore how to create a component library using React Hooks and Storybook, a tool for developing UI components
    3 min read
  • How do you deploy a React application?
    Deploying a React application is the process of making your React project accessible on the internet so that users can interact with it. It involves several steps to ensure your application is properly built, uploaded to a hosting service, and configured to work correctly in a live environment. This
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences