Tech Sample Demo | React + System UI (Theme UI/styled-components)

Demo of the System UI Tech Sample in Backlight.dev

Backlight.dev Tech Samples are lightweight Starter-Kit you could use to try technologies in a playground, or start your own Design System from scratch with them.

▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬

0:00 - Intro 0:43 - System UI 2:04 - Design Tokens 4:50 - Theme UI 9:27 - styled-components 12:57 - Adding a Theme UI component 17:07 - Outro

▬ Resources ▬▬▬▬▬▬▬▬▬▬

• Open-source Starter-kit → https://github.com/divriots/starter-react-sui
• System UI Tokens system → https://system-ui.com/
• Theme UI Components → https://theme-ui.com/
• styled-components theming → https://styled-components.com
• ‹div›RIOTS Dockit documents rendering engine for React → https://github.com/divriots/dockit-react

▬ Made in Backlight! ▬▬▬▬▬▬▬▬▬▬

Check out the React System UI Tech Sample → https://backlight.dev/preview/z99ptYZyvMOGDivUlP9u

Check out Backlight.dev → https://backlight.dev