React Conferences

React Summit 2023

React Summit 2023

English versionEN

Video: Building Pixel-Perfect UI Components Using CSS Variables

Sam Sycamore

Read FAQ and transcription

component library css react css variables

Video Summary and Transcription

The video delves into the potential of CSS variables in enhancing user interface design, particularly through the Joy UI library. Joy UI, a sister library to Material UI, focuses on improving the developer experience by leveraging CSS variables, which can simplify the process of making pixel-perfect adjustments. This is particularly useful for tasks like customizing the switch component, which can benefit from CSS variables by eliminating the need for JavaScript and manual calculations. The speaker emphasizes the power of CSS variables for design systems, highlighting their ability to provide a single source of truth for values like branding colors, thereby facilitating consistency and future-proofing. Joy UI's use of CSS variables allows components to automatically adapt to their parent and child styles, offering a more intuitive and joyful experience for developers. The video also touches on the challenges developers face with Material UI components, where making small adjustments often requires multiple changes and calculations, issues that Joy UI aims to address. Developers interested in experimenting with CSS variables in Joy UI can find playgrounds for customization in the Joy UI documentation.

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

Available in Español: Construyendo Componentes de IU Perfectos con Variables CSS

FAQ

The speaker's most controversial opinion is that they love CSS.

The speaker is excited about CSS variables because they open up many possibilities for UI developers, allowing components to adapt to their surroundings and match the styles and structures of their parent and child components.

MUI leverages CSS variables to deliver a developer experience that sparks joy and delight when customizing React components, enabling components to adapt their styles automatically.

CSS variables are powerful for design systems because they provide a single source of truth for values like branding colors, making it easier to maintain consistency and future-proof code.

CSS variables improve the developer experience by allowing dynamic values and mathematical calculations within CSS, eliminating the need for JavaScript and simplifying adjustments like pixel-perfect changes.

An example is the switch component in Joy UI. Adjustments to the component, such as changing the width of the track or the size of the thumb, are handled seamlessly thanks to CSS variables.

Developers face issues such as making multiple adjustments when trying to make small changes to components, dealing with the complexity of pixel-perfect adjustments, and performing mathematical calculations for properties like border radii.

Joy UI simplifies adjustments by using CSS variables, which automatically adapt component styles without requiring JavaScript or manual calculations for properties like border radii.

Developers can find CSS variable playgrounds throughout the Joy UI documentation, which allow them to experiment with and customize components easily.

Joy UI is a new sister library to Material UI that implements MUI's own in-house design system along with innovative developer experiences, particularly in how it handles CSS variables.

Video transcription and chapters available for users with access.

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 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.

component library design systems best practices

Towards a Standard Library for JavaScript Runtimes

Node Congress 2022

34 min

Towards a Standard Library for JavaScript Runtimes

Top Content

James Snell

Workers team @Cloudflare

There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.

component library node.js javascript

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

Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components

React Summit 2022

17 min

Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components

Top Content

Thomas Findlay

Findlay Web Tech

Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.

component library react components architecture react composition react fiber programming concepts

Rethinking CSS - Introducing Stylex

React Finland 2021

25 min

Rethinking CSS - Introducing Stylex

Top Content

Naman Goel

CSS + superpowers - bloat. How Stylex creates a zero-cost abstraction that gives CSS superpowers.

css-in-js css stylexjs react native

Building Cross-Platform Component Libraries for Web and Native with React

React Advanced 2021

21 min

Building Cross-Platform Component Libraries for Web and Native with React

Top Content

Perttu Lähteenlahti

Perttu Lähteenlahti

This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.

component library cross-platform react react native for web react native react native ui library react native components

Workshops on related topic

Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI

React Summit 2023

137 min

Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI

Top Content

WorkshopFree

Sam Sycamore

Siriwat (Jun) Kunaporn

2 authors

Learn how to put MUI’s complete ecosystem to use to build a beautiful and sophisticated project management dashboard in a fraction of the time that it would take to construct it from scratch. In particular, we’ll see how to integrate the MUI X Data Grid with Joy UI, our newest component library and sibling to the industry-standard Material UI.
Table of contents:- Introducing our project and tools- App setup and package installation- Constructing the dashboard- Prototyping, styling, and themes - Joy UI features- Filtering, sorting, editing - Data Grid features- Conclusion, final thoughts, Q&A

component library

Learn To Use Composables: The Swiss Army Knife Of Vue Developers

Vue.js Live 2024

163 min

Learn To Use Composables: The Swiss Army Knife Of Vue Developers

Workshop

Juan Andrés Núñez Charro

Juan Andrés Núñez Charro

Composables (composition functions) are stateful/stateless functions that can leverage Vue's reactivity API, decoupling it from components.This shift in perspective opens the possibility for tackling common scenarios in a new and creative way. In this workshop, you will learn how to solve typical problems every Vue developer faces, using composables:
- Data store;- Component cross-communication;- Utility functions (DOM, API, etc);And more.

vue unit testing component library