Utilities
focusRing
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
Installation
- 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",]