When you integrate C1, you want the generated UI to look and feel like a natural part of your application. C1’s styling system is designed for this purpose, giving you control over the appearance of the components it creates.

​
Approaches to Styling

C1 styling system uses a layered approach, allowing you to make broad, application-wide changes quickly, and then make more specific adjustments as needed. Theming This is your starting point and the most effective way to apply your brand’s style. Using a central theme object with our <ThemeProvider>, you can control global styles like colors, fonts, spacing, and border-radius. This is the fastest way to ensure brand consistency across all generated components. Component-Specific Customization Some complex components, like charts, have their own detailed styling options that you can define within the theme object. This allows for more detailed control over a specific component’s appearance when needed. CSS Overrides For specific adjustments that the theming system doesn’t cover, you can use standard CSS to target and override the styles of any element. This gives you the maximum level of control and should be used for making final, precise changes.

​
Guides in This Section

This section contains the following guides to help you customize your C1 components.
  • Theming: Use the <ThemeProvider> to apply global styles, use presets, and configure light and dark modes.
  • Customizing Charts: A deep dive into the specific theme properties available for styling charts.
  • Overriding Styles with CSS: A guide on how to apply custom CSS classes for precise control over component styles.