Waffles is the DataCamp Design System.

It provides all the tools to build wonderful experiences that look, feel, sound, and smell like DataCamp.

Core principles

Example landing page card image

Components for every occasion

Waffles offers a wide range of React and Figma components, to help developers and designers build DataCamp experiences together in a consistent way. Check a short setup guide and get started—the best way to learn is just to start using the components!

Example landing page card image


Accessibility is not an afterthought, but one of Waffles fundamental principles. A lot of effort is put into making sure components are accessible for all users, both with keyboard and screen reader. They are also tested in various browsers and devices.

Example landing page card image


All React components come with sensible defaults out of the box. They are mimicking the behavior and API of native counterparts. In most cases, it is possible to customize their look with a little CSS.