React Conferences

React Advanced Conference 2023

React Advanced Conference 2023

English versionEN

Video: Measuring Coverage of React Design System

Karan Kiri

SDE 2 FE at Fabric, Previous - Razorpay

Karen discusses measuring the coverage of a design system using React Scanner. The tool helps analyze code and extract component details, allowing for the measurement of component usage and identification of patterns. The analysis also reveals anti-patterns in the design system consumption. By restructuring components, data-driven decisions can be made to optimize component usage at a route level and address anti-patterns.

This talk has been presented at React Advanced Conference 2023, check out the latest edition of this React Conference.

Read FAQ and transcription

design systems react design systems react measure

Karan Kiri

11 min

23 Oct, 2023

Comments

Sign in or register to post your comment.

Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Design Systems: Walking the Line Between Flexibility and Consistency

React Advanced Conference 2021

47 min

Design Systems: Walking the Line Between Flexibility and Consistency

Top Content

Siddharth Kshetrapal

Siddharth Kshetrapal

The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.

best practices design systems component library

Build a Design System with React and Tailwind CSS

React Summit 2022

27 min

Build a Design System with React and Tailwind CSS

Top Content

Shruti Balasa

This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.

design systems css react design systems tailwind react

Walking the Line Between Flexibility and Consistency in Component Libraries

React Summit 2022

27 min

Walking the Line Between Flexibility and Consistency in Component Libraries

Siddharth Kshetrapal

Siddharth Kshetrapal

This Talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the action list pattern and the customization options available for the action list component. The Talk also emphasizes the introduction of a composite component to improve API flexibility. Additionally, it mentions the importance of finding the right balance between flexibility and consistency and the use of types to enforce specific child components.

design systems component library

Find Out If Your Design System Is Better Than Nothing

React Summit 2022

20 min

Find Out If Your Design System Is Better Than Nothing

Arseny Smoogly

Solution Architect @ Rangle

Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.

case study design systems react components component library

Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

JSNation 2023

10 min

Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

Hidde de Vries

Web Developer, Netherlands

The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.

design systems accessibility

Type-safe Styling for React Component Packages: Vanilla Extract CSS

React Advanced Conference 2023

19 min

Type-safe Styling for React Component Packages: Vanilla Extract CSS

Watch video: Type-safe Styling for React Component Packages: Vanilla Extract CSS

Negar Jamalifard

Negar Jamalifard

Frontend Developer

Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.

typescript design systems css css-in-js vanilla react

Workshops on related topic

Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems

React Advanced Conference 2022

118 min

Rapid UI Development in React: Harnessing Custom Component Libraries & Design Systems

Workshop

Richard Moss

In this workshop, we'll take a tour through the most effective approaches to building out scalable UI components that enhance developer productivity and happiness :-) This will involve a mix of hands-on exercises and presentations, covering the more advanced aspects of the popular styled-components library, including theming and implementing styled-system utilities via style props for rapid UI development, and culminating in how you can build up your own scalable custom component library.
We will focus on both the ideal scenario---where you work on a greenfield project---along with tactics to incrementally adopt a design system and modern approaches to styling in an existing legacy codebase with some tech debt (often the case!). By the end of the workshop, you should feel that you have an understanding of the tradeoffs between different approaches and feel confident to start implementing the options available to move towards using a design system based component library in the codebase you work on.
Prerequisites: - Familiarity with and experience working on large react codebases- A good understanding of common approaches to styling in React

react design systems