A utility to set the style of focused elements globally.

You can use the focusRing utility to ensure that all components have the same :focus-visible style. This approach lets you style the focus state once, rather than having to do it for each component individually. Read more about this pseudo-class here.

Components using this utility:

  • BarList
  • Button
  • Calendar
  • Checkbox
  • DatePicker
  • Dialog
  • Input
  • RadioGroup
  • Switch
  • Tabs


  1. 1

    Add the following code to your utils.ts file.

    // Tremor Raw focusRing [v0.0.1]
    export const focusRing = [  // base  "outline outline-offset-2 outline-0 focus-visible:outline-2",  // outline color  "outline-blue-500 dark:outline-blue-500",]