Scrollbar

Barras de desplazamiento redondeadas y concéntricas desde los tokens para contenedores nativos, más scrollbar-none.

Paragraph 1. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 2. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 3. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 4. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 5. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 6. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 7. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 8. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 9. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 10. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 11. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Paragraph 12. Scroll to see the track and the thumb: both are pills, and the thumb sits 1px inside the track.

Instalación

Agrégalo con el CLI de shadcn o copia el código a mano.

$ pnpm dlx shadcn@latest add @ssntl/scrollbar

Reglas

Lo que este componente espera de ti, tal como se instala en styles/ssntl/scrollbar.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).

styles/ssntl/scrollbar.md

## Reglas de Scrollbar

- Redondeada y concéntrica en Chrome, Edge y Safari: un riel de 8px y un pulgar de 6px, ambos en píldora, con terminaciones redondas.
- Firefox no permite redondear una barra nativa: recibe una barra delgada con los mismos colores. Para una barra idéntica en todas partes, usa `ScrollArea`.
- Aplícala a html para la página; también da estilo a cada contenedor con scroll adentro.
- `scrollbar-none` oculta la barra pero mantiene el desplazamiento; úsala solo donde algo más muestre que el contenido se desplaza.

Abrir el archivo de reglas completo