React Component Library From Scratch using Tailwind CSS

Learn to build a reusable button component in a react tailwind css library, with title and onClick props, and primary color variants (contained and outlined) using dynamic classNames.

Learn to implement a disabled button with opacity and non-click behavior, and create a rounded button using tailwind props and dynamic classes, with tailwind safe list configuration.

Learn how to implement a custom background color prop in a React component library using Tailwind CSS, including dynamic color handling, fallbacks, and inline style for non-tailwind colors.

Implement custom text color and background color in the button component by toggling between white, orange, and primary outline variants, ensuring the color logic works with outline and non-outline states.

Build an input component with basic and rounded variants, plus disabled and error states, wiring value and onChange while applying label, placeholder, and error message props using Tailwind CSS.

Demonstrates building reusable inputs with disabled and error states in a Tailwind CSS based React component library, including handling value, error messages, and conditional borders.

Demonstrate building a header component in a React Tailwind CSS library, including routing setup, folder structure, and configurable text properties like size, color, uppercase, underline, bold, and alignment.

Explore creating variants of a page header component in a tailwind-based React library, including the title prop, text size, underline, bold, uppercase, align center, color, and border options.

Develop a reusable spinner component in React, supporting small, medium, and large sizes with color and border size options, implemented via Tailwind classes and inline styles.

Demonstrate spinner variants in a React component library with Tailwind CSS, including medium and large spinners and a custom color spinner using border color utilities.

Explore building a versatile React tabs component from scratch using Tailwind CSS, with outline, dash, vertical, and disabled variants that switch content when a tab is clicked.

Explore implementing tabs variants in a React Tailwind CSS project by adding an outlined and underlined (dashed) tab style, using a variant prop, conditional classes, and active index highlighting.

Implement vertical and horizontal tabs in a React Tailwind CSS library by using an orientation prop, arranging tab names and content with conditional flex layouts, including outline and underline variants.

Implement a tabs component with a disabled tabs variant by passing disabled indexes to prevent selecting certain tabs. Preview the outline underlined variant and consider adding icons and other variants.

Build a modal pop-up component with closable and non-closable variants, featuring an overlay, centered content, and a close button. Configure open, setOpen, title, content, and closable to control visibility.

Set the modal width from 500px to 800px and ensure the title and content render. Toggle closable modes and adjust background opacity so the backdrop dims without distorting it.

Learn to build a modal with a footer in a Tailwind CSS React component library, wiring open state, passing footer props, and implementing save and cancel actions with outlined buttons.

Learn to build a custom select component from scratch using React and Tailwind CSS, including variants, options mapping, selected value handling, and a responsive dropdown.

Implement a select field with custom label and value properties, using a country codes array and label and value for options.

Build a React select with icons and country flags, render image icons for options, and display the selected label with proper icon handling in Tailwind-based layouts.

Learn to implement a disabled select in a React component library with Tailwind CSS. Pass the disabled prop, apply opacity and pointer-events styles, and ensure the component cannot be selected.

Build an autocomplete by replicating the select component and adding a search-driven filter that displays matching options in an input field on focus, then hides on blur.

The lecture demonstrates handling the search criteria after selecting an autocomplete option by using label and value properties, updating input value, and auto-focusing the input for smooth navigation.

Create a reusable React table component with Tailwind CSS by passing columns and data source, rendering headers and rows, and enabling default column sorting.

Learn to implement table sorting in a React component by a sort-by select, wiring a data source to a temp data array and applying array sort by various fields.

Implement the table search by filtering entire rows with json.stringify across all columns. Ensure the table width stays full and the search input labeled 'Search' functions across rows.