You Can Go Your Own Way: KendoReact Unstyled Mode

Unstyled mode will let you control which KendoReact components use the default CSS classes and which you want to style on your own.

If there’s one thing we can feel pretty safe assuming about React developers, it’s that they prefer to do things their own way. After all, one of the main perks of the React approach is the fact that it’s a library, not a framework—the less prescriptive, batteries-NOT-included approach allows devs to pick and choose their tech stack as they wish.

The nice thing about Progress KendoReact is that it can meet you were you are, regardless of your personal preference. If you like to keep things light and run with Vite, KendoReact can do that. But if you prefer to use a full React framework, we do that too! And now, that extends to styling as well.

Some prefer the grab-and-go approach of a CSS library like Tailwind or Uno, while others like to write their CSS by hand … OK, maybe that’s just me. Whichever one you prefer, the new KendoReact Unstyled mode allows you to leverage all the power and functionality of the KendoReact components you know and love—without having to work with (or around) our default CSS classes.

What Is Unstyled Mode?

KendoReact Unstyled mode removes the default KendoReact CSS classes from the components. That allows you to:

• Apply your own custom styles using whatever naming convention you prefer for your CSS classes
• Avoid conflicting styles or having to overwrite KendoReact defaults (no more !importants)
• Reduce your bundle size by only including the exact styles you need

You can even use a mix of our pre-made Themes and Unstyled components, if there are only a few that you want to style differently. It’s super adaptable, incredibly flexible and—of course—easy to implement. Let’s take a look.

How to Use Unstyled Mode

To use components in Unstyled mode, all you have to do is wrap the component in the UnstyledContext provider and pass the predefined CSS classes object in as a value.

<UnstyledContext.Provider value={customStyles}>
    <Button>Learn More</Button>
</UnstyledContext.Provider>

That makes it a piece of cake to combine KendoReact with your favorite third-party CSS library. In fact, there’s a great sample app our dev team created to show off just how simple it is to integrate Tailwind. Check it out or fork it as the basis for your own project!

Why Use Unstyled Mode?

We’ve already talked about the perks of being able to leverage a third-party CSS library, but why else might you reach for Unstyled mode?

• You’ve already invested time and energy into creating a design system. Now, you don’t have to “translate” values and names between your own system and the KendoReact system—no more naming conflicts, or remembering that you call it “main” while we call it “primary.” Get everyone speaking the same language and unified between code and design.
• There’s that one pesky component that you’re having trouble overwriting the default styles on. Sometimes, there’s some little tiny thing that you just want to adjust, but it’s baked into the default theme. And sure, you can write some nasty CSS to get at it ... or, you could just toggle off the default classes for that component and save yourself the trouble.
• Bundle size and performance is a top priority. Look, the hard truth is that it takes a lot of CSS to style 100+ professional, beautiful, accessible, responsive components—that means that our themes can be kinda chunky. If you’re in a situation where bundle size is a big deal, it can be helpful to not import the default theme.

What KendoReact Components Support Unstyled Mode?

Right now, the following components can be used with Unstyled mode:

• Animations
• Button
• ButtonGroup
• DropDownButton
• SVG Icons
• DateInput
• DateTimePicker
• TimePicker
• Form
• Input
• TextBox
• MaskedTextBox
• RadioButton
• RadioGroup
• Label
• FloatingLabel
• Hint
• Error
• Popup

We’ll keep adding to this list, so keep an eye on our docs for all the latest info. And if you have a component that you’d like us to prioritize, let us know via the KendoReact Feedback Portal!