Custom Styling

Customize the timepicker appearance using CSS custom properties and your own styles

💡

CSS Custom Properties

Timepicker-UI uses CSS custom properties (CSS variables) that you can override to match your brand colors and design system. Version 3.2.0 added Material Design 3 ripple effects and expanded the color system with container colors.

Custom CSS Class

Add your own CSS class via cssClass option and define custom CSS variables:

Select time

Dark Theme Example

Create a custom dark theme with purple accents:

Select time

Custom Font & Border Radius

Customize typography and rounded corners:

Select time

Material Design 3 Features (v3.2.0+)

Version 3.2.0 introduced full Material Design 3 support with ripple effects and container colors:

Select time

💡

Ripple Effect

Material Design 3 ripple effects are automatically applied to AM/PM buttons and time input fields. Customize the ripple color using --timepicker-on-primary-container variable or override the [data-md3-ripple]::before pseudo-element styles.