Build and Publish React UI Component Library to NPM

Create the first button component using title and variant props (outline or content), apply inline styles, and prepare for npm publishing with future Tailwind refactor and Rollup export.

Learn rollup, a JavaScript module bundler that compiles a project into a single JavaScript file for npm publishing by converting non-JS assets to JavaScript.

Learn to set up Rollup by installing seven npm modules and understand each module’s purpose for building a React UI component library.

Configure a rollup build by importing TypeScript, CommonJS, resolve, terser, peer dependencies external, and DTS plugins. Set input to src/index.ts and output in CommonJS and ESM formats, plus type definitions.

Learn how to build a React UI component library with rollup by configuring package.json for cjs and esm outputs, adding types, and running npm build.

Publish your React UI component library to npm by creating or logging into an npm account, updating package.json name, logging in via terminal, and publishing with npm publish --access public.

Learn to test a published react ui component library by creating a separate react app, installing the library, running the dev server, and validating props like title and variant.

Upgrade the published library by adding an onClick prop and pointer cursor, build and publish a new version, then install the latest in the consumer app to reflect changes.

Test the Satya UI library locally without publishing to npm by linking the library in a separate app, building changes, and validating in a consumer app.

Replace inline styling with pure css by applying classes btn, btn outlined, and btn content in the button component. Enable postcss in rollup to process css and build.

Learn to install and configure Tailwind CSS within a React project, create and modify config files, and convert components to Tailwind CSS utility classes for reliable styling.

Learn to use the classnames library to apply conditional classes in a React component by passing a base string and a condition object, including a disabled state with pointer events.

Learn to build a fully functional button component, adding size and rounded props with one mandatory and three optional, and apply conditional tailwind classes to manage height, border radius, and shadows.

Develop a React button component with an icon prop and configurable icon position using Lucid React icons, and validate styling through build, Storybook, and npm publishing workflow.

Install and configure Storybook for the Satya UI component library, write stories, and test components in isolation, moving from npm publishing and npm link to a Storybook workflow.

Understand what a story is in storybook and how to write button variants using props like primary, size, label, and background color.

learn how to author Storybook stories for a React button component, including creating tsx stories, exporting variants with args, and wiring Tailwind CSS via postcss for accurate styling.

Add storybook variations for the button component, including rounded border radius and icon properties, using Lucid React icons and props handling. Preview outline variants and prepare for loading stories.

Implement a button loading state by adding a loading prop and a spinner. Build and test a story for the button component to visualize variants, sizes, and border options.

Develop a reusable input component with rich props (value, onChange, name, label, placeholder, disabled, type, size, rounded, error) and its Storybook stories for a React UI library.

Students learn to write input field stories in Storybook, showcasing size, disabled, and rounded variants, and adjust styling to prepare themes for a React UI component library.

Build a theme provider wrapper that passes a primary color (default 000) to all components via a CSS variable. See it update across buttons and inputs when changed.

Test and validate a theme provider in a React app by linking local builds, handling peer dependencies, and updating button and input styles via theme-driven props across the app.

Create a reusable select component with value, on change, options, and optional image support, manage show options state, and build its story in Storybook before publishing to npm.

Learn to display country flag images in a select field, create basic and advanced stories, and align layout, sizing, and theming using lucid react icons.

Explore how to manage state in storybook for a select component by wiring useState and useEffect, rendering templates with args, binding value and label, and refining options and styling.

Explore how to write the disabled story for the select field, apply default false, and use class names to lock options, then add size and rounded props with examples.