Pasos
GratisPasos con una línea de progreso que se llena de un nodo al siguiente; el paso nuevo se enciende cuando el trazo llega y la palomita se dibuja al completarse.
Navegación
Navegación
Gratis
Notificaciones
Notificaciones apiladas como cartas: se despliegan al pasar el cursor o enfocar, se pausan mientras las lees, se cierran solas y se anuncian con aria-live.
- Plan
- Gratis · MIT
- Dependencias
- Solo React
- Props
- 9 (7 ajustables)
Pasa el cursor sobre la pila para desplegarla.
Cambios guardados
La versión 2.4 ya está publicada.
Nuevo comentario
Ana respondió en Diseño de producto.
Almacenamiento al 90 %
Libera espacio para seguir subiendo archivos.
Instalación
1. Instala el paquete
npm i furin2. Impórtalo
import { ToastStack } from "furin";También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.
Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| ref | Ref<ToastStackHandle> | "" | Referencia con push, dismiss y clear para lanzar notificaciones desde tu código. |
| defaultToasts | ToastData[] | "3 de ejemplo" | Notificaciones que ya están al montar. |
| position | string | "bottom-right" | Esquina donde se apilan. |
| duration | number | 5000 | Milisegundos por defecto antes de cerrarse (0 = no se cierran). |
| max | number | 5 | Máximo de notificaciones a la vez. |
| fixed | boolean | false | Se ancla a la ventana en vez de a su contenedor. |
| trigger | boolean | false | Muestra un botón para lanzar notificaciones de ejemplo. |
| autoplay | number | 0 | Segundos entre notificaciones de ejemplo automáticas (0 = apagado). |
| label | string | "Notificaciones" | Etiqueta accesible de la región. |
Sigue explorando
Pestañas gelatina
GratisPestañas accesibles cuya selección es una gota de líquido: se estira hacia la pestaña nueva, se adelgaza en el cuello y se funde al llegar.
Navegación