Styling C1
Learn how to style C1 UI according to your requirements
This guide assumes that you have completed the Quickstart.
C1 is designed to be highly customizable. Here are a few simple ways to customize C1 UI to your requirements:
Using theme presets
C1 can easily be customized through a variety of pre-built themes. To apply a theme, you can import themePresets
from @crayonai/react-ui
and pass the preset
to the theme
prop of the C1Chat
component.
Switching between light and dark mode
You can toggle between light and dark modes by setting the mode property in the theme object. All Crayon theme presets fully support both modes.
Setting agent name and logo
You can set the agent name and logo by passing the agentName
and logoUrl
props to the C1Chat
component. These values control the agent’s display name in the
sidebar and the avatar shown next to its messages.
Overriding Crayon classes
For advanced customization, you can override the CSS classes applied to UI components. For example, to hide the AI agent’s logo next to its messages,
target the .crayon-shell-thread-message-assistant__logo
class in your CSS.
You can find the classes attached to different UI components by inspecting the elements through the browser’s developer tools.
Then import those styles in your component: