CF

Advanced Radix UI

2h 13m 5s
English
Paid

Radix UI has become one of the most popular component libraries in the React ecosystem. It has more than 20 low-level primitives packed with functionality that make building custom UI components an absolute delight.

In this course you'll learn how to work with Radix's primitives by building four components with completely custom designs, interactions, and animations. You'll see how Radix stays out of the way of your styling code so that your components can match the design of your application down to the pixel, while ensuring they still support keyboard navigation, work on any device, and follow expected accessibility patterns.

About the Author: Build UI

Build UI thumbnail

Build UI is the paid screencast platform of Sam Selikoff and Ryan Toronto, both former Frontside / EmberConf instructors and now full-time independent React educators. The platform's signature is short, focused screencasts on specific React and Next.js patterns rather than multi-hour course bundles.

The CourseFlix listing carries six Build UI courses spanning React data fetching, server components, Next.js App Router patterns, and the practical side of building modern React applications. Material is paid and aimed at intermediate React developers who already know the basics and want depth on the patterns that show up in real production codebases.

Watch Online 4 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 4 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Animated Switch
All Course Lessons (4)
#Lesson TitleDurationAccess
1
Animated Switch Demo
24:33
2
Apple Selector Group
18:56
3
iOS Slider
01:01:44
4
Animated Toast
27:52
Unlock unlimited learning

Get instant access to all 3 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

  • Next.js - The Full Course thumbnailFreeUpdated 2y ago

    Next.js - The Full Course

    By: Fireship
    Next.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil
    1h 14m5/5
  • Make 20 React Apps thumbnailUpdated 2y ago

    Make 20 React Apps

    By: Chris Sev
    Learn React best practices and concepts that you can use on the job, in side projects, and in any React app.
    12h 20m5/5
  • Web Performance Fundamentals thumbnailUpdated 9mo ago

    Web Performance Fundamentals

    By: Nadia Makarevich
    "The Foundations of Web Performance" is devoted to the key aspects of enhancing the speed and responsiveness of web applications in the context of React.

Frequently asked questions

What are the prerequisites for enrolling in this course?
Before enrolling in this course, students should have a solid understanding of React. Familiarity with building user interfaces and an understanding of component-based architecture will be beneficial. While the course focuses on Radix UI, a basic knowledge of HTML, CSS, and JavaScript is essential to effectively grasp the concepts taught.
What projects will I build during this course?
Throughout the course, students will build four distinct components: an Animated Switch, an Apple Selector Group, an iOS Slider, and an Animated Toast. Each project is designed to teach unique aspects of Radix UI's primitives, focusing on custom designs, interactions, and animations.
Who is the target audience for this course?
The course is ideal for React developers interested in enhancing their UI development skills using Radix UI. It is suited for those who want to create highly customized and accessible components while maintaining full control over styling and design.
How does this course compare to other courses on component libraries?
Unlike other courses that may focus on higher-level component libraries with predefined styles, this course emphasizes Radix UI's low-level primitives, allowing for greater customization and styling flexibility. It also highlights accessibility and device compatibility, which are often not covered as extensively in similar courses.
What specific tools or platforms are utilized in the course?
The course primarily uses Radix UI, a popular component library within the React ecosystem. Students will also engage with HTML, CSS, and JavaScript to implement custom designs and interactions for the projects.
What topics are not covered in this course?
This course does not cover advanced React topics beyond the use of Radix UI. It focuses specifically on building components with Radix's primitives and does not delve into server-side rendering or other state management libraries like Redux.
How can the skills learned in this course benefit my career?
The skills acquired in this course provide a strong foundation in building customized and accessible UI components in React, using Radix UI. This knowledge is valuable for front-end developers aiming to enhance their expertise in creating user-friendly and adaptable interfaces, which are highly sought after in the industry.