discord/focus-rings
A centralized system for displaying and stylizing focus indicators anywhere on a webpage. observed · 2026-08-28
Health v2 · maintenance only
28/100
- Activity 11
- Release rhythm 8
- Longevity 100
How is this computed?
round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10) — computed 2026-09-03. Adoption (stars, forks) is never an input.
- gap_med: n/a
- age_days: 2093
- days_rel: n/a
- days_push: 538
- n_releases_24m: 0
Adoption not part of the score
1133 stars · 26 forks observed · 2026-08-28
What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded
A React library from Discord that renders and styles focus indicators for keyboard navigation anywhere on a webpage. It provides FocusRing and FocusRingScope components to centrally manage consistent, well-positioned focus outlines.
Use cases
- add accessible focus rings to buttons and links in react
- implement keyboard navigation focus indicators across a web app
- style consistent focus outlines like discord does
- render focus rings inside scrollable or absolutely positioned containers
- replace inconsistent css focus styles with a centralized system
When to choose
- you are building a React app that needs polished, app-wide keyboard focus indicators
- native CSS focus styles are insufficient for your design or positioning needs
- you want a battle-tested solution used in production by Discord
When to avoid
- your project does not use React
- you only need simple outline styling achievable with plain CSS :focus-visible
- you need focus management for non-DOM or canvas-based UIs
Facets
library · maturity stable
ui-components accessibility frontend-framework web-development frontend accessibility cross-platform react focus-indicators keyboard-navigation typescript npm-package web-server nodejs
1 source
- readme: https://github.com/discord/focus-rings · fetched 2026-08-28 · 4f391994278b
Member repositories
| Repository | Role | Health v2 |
|---|---|---|
| discord/focus-rings | main | 28 |
For agents
markdown · JSON · MCP: product_card(name="discord/focus-rings")
Data as of 2026-08-30T08:39:29.467469+00:00 · Report a problem