{"id":324553,"date":"2020-10-29T16:26:16","date_gmt":"2020-10-29T23:26:16","guid":{"rendered":"https:\/\/css-tricks.com\/?p=324553"},"modified":"2020-11-05T12:06:06","modified_gmt":"2020-11-05T20:06:06","slug":"using-your-own-design-system-with-kendoreact-components","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/using-your-own-design-system-with-kendoreact-components\/","title":{"rendered":"Using Your Own Design System with KendoReact Components"},"content":{"rendered":"\n

Maybe you’ve already heard of (or even worked with!) KendoReact<\/a>. It’s popped up in some of my day-to-day conversations, especially those about working with design systems and React. You could think of it as a component library like Bootstrap or Material Design, except the components in KendoReact are far more robust. These are interactive, state-driven components ready to start building full-blown UI’s right out of the gate (not to mention, if you want to use Bootstrap as the theme, you absolutely can).<\/p>\n\n\n\n

Whenever you’re thinking about using a UI library, you need to think about the styling capabilities. Are you able to really express your brand with these? Were they meant<\/em> to be styled? What is the styling experience going to be like?<\/p>\n\n\n\n

Fortunately, KendoReact really makes styling a first-class citizen of the entire UI library.<\/p>\n\n\n\n\n\n\n\n

KendoReact is a collection of UI components for building sites. It’s a pretty massive one. Over 80 by my count, and that doesn’t include the child components of heavy lifters like the <Grid \/><\/a><\/code> family. <\/p>\n\n\n\n

Here’s one, the <DropDownList \/><\/a><\/code>, and just using the default theme (even that is optional):<\/p>\n\n\n\n