Skip to main content
Chainlit Application allows for design customization through the use of a custom CSS stylesheet. To enable this, modify your configuration settings in .chainlit/config.toml.
config.toml
[UI]
# ...
# This can either be a css file in your `public` dir or a URL
custom_css = '/public/stylesheet.css'
At the moment, we do not provide a detailed guide of all the available css classes. It is up to you to dig in the Web Inspector and find the css class you wish to override.
Once the configuration is updated, restart the application. Your custom styling will now be applied.

​
CSS Variables

Chainlit exposes CSS variables that let you customize specific UI elements without digging into class names.

​
Stop Icon & Loading Cursor

You can override the appearance and animation of the stop button icon and the loading (blinking) cursor:
VariableDescriptionDefault
--stop-icon-maskSVG data URI for the stop icon shapeBuilt-in square icon
--stop-icon-colorStop icon colorcurrentColor
--stop-icon-animationStop icon CSS animationnone
--loading-cursor-maskSVG data URI for the loading cursor shapeBuilt-in circle
--loading-cursor-colorLoading cursor colorhsl(var(--foreground))
--loading-cursor-sizeLoading cursor size0.875rem
--loading-cursor-animationLoading cursor CSS animationpulse
:root {
    --stop-icon-animation: my-pulse 2s ease-in-out infinite;
    --loading-cursor-animation: my-breathe 2s ease-in-out infinite;
    --loading-cursor-size: 1.25rem;
}
@keyframes my-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.92); }
}
@keyframes my-breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.85); }
}
Since version 2.11.0.