19 pestañas React de todo tipo para líneas de tiempo y más

Ya en su momento compartimos una serie de timelines para esos elementos web en los que queremos registrar una serie de eventos. Ahora son 19 pestañas con el mismo objetivo, aunque en React para que encontréis aquella perfecta que defina acontecimientos en una línea de tiempo o la historia propia de vuestra compañía con texto relacionado.

En esta colección de 19 pestañas React las hay tanto horizontales como verticales y son todas totalmente gratuitas. Así que podéis disponer de ellas tal como os plazca. Una serie de pestañas que cubren todo tipo de necesidades para seguir el estándar actual de diseño web en este año 2018. Vamos a ello con 19 pestañas React que no dejarán indiferente a nadie.

React Tiny Tabs

Un componente de pestaña para React con opciones básicas para personalizar el tema. Desde la página ejemplo podéis ver el distinto proceso de composición que da resultado en una básica pestaña con un diseño un poco peculiar.

Aquí Github.

React re super tabs

Desde codesandbox podéis acceder a la demo de esta pestaña para React que se distingue por poder volver a ser usada. Como se puede ver en el ejemplo, son pestañas básicas con la info que queramos aportar en nuestro sitio web. Tenéis toda la información concerniente en la demo.

Aquí Github.

React web tabs

Con esta pestaña para React podemos optar por un diseño a lo horizontal u otro a lo vertical. Se distingue por ser modular y accesible para unas pestañas que podéis ver en sus respectivos ejemplos para así usarlas tal como os convenga en vuestro sitio web.

Aquí Github.

React Responsive Tabs

Pestañas responsive para React que se distinguen por ser para mobile. En la página ejemplo podéis hallar distintas opciones para visualizar cada una de las personalizaciones que dota estas pestañas para React.

No falta su Github.

React accesible tabs

Un componente accesible a pestañas para React. Bien simple en toda su esencia para tres secciones que se muestran en el ejemplo dado para que os hagáis una idea de estas pestañas para React.

Su Github.

Material tabs

Aquí no tenemos página de demostración para ver in situ esta pestaña para React, pero sí que podéis dirigiros a la página web en github para así tener en vuestra mano todo el código. Es un paquete React que ofrece un componente de pestañas a lo Material Design, el lenguaje de diseño de Google que lleva ya con nosotros unos cuantos años. Aquí podéis acceder a las herramientas publicadas por Google para valernos de Material Design.

React tabs navigation

React tabs navigation es un componente de calidad React que te permite navegar a través de pestañas en tu app web. Desde el mismo enlace a la página ejemplo podéis acceder a su Github para presenciar el resto del código.

React TabTab

Una pestaña para React con soporte a mobile y que se puede editar. Es un API basado de pestañas para React JavaScript. Tenéis la opción de elegir entre tres temas desde la página ejemplo y pasar a Github desde el botón «Document» en la misma. Es en la misma página ejemplo donde muestra toda la personalización que puede ser llevada a cabo.

React Aria Tabpanel

Permite interaccionar con las pestañas con las teclas de flechas de dirección del teclado para un componente React de gran flexibilidad y que permite gran personalización. Tenéis variados ejemplos desde su página de demostración.

React Tabbordion

Otro componente para React que tiene todo tipo de opciones de personalización al igual que la dirección al repositorio. Universal y semántico permite crear acordeones y pestañas para tu sitio web. No falta detalle a toda la información necesaria para poder implementarlo.

Faster React Tabs

Un componente pestaña para React que se vale por su flexibilidad y su contexto agnóstico. Perfecto para renderizar pestañas de acceso fácil. Toda la información, al igual que el enlace al repositorio en Github está disponible desde la página ejemplo dada.

React swipe views

Componente para React para pestañas incrustadas y vistas que se pueden visualizar a través de gestos. Perfecta para un sitio dedicado a lo mobile. Tenéis ejemplos de las distintas opciones en la página ejemplo para que no perdáis detalle de este componente React.

Tabs

Un componente para pestañas React que desde su sitio web ejemplo tenéis las distintas opciones dadas para personalizarlo. Toda la información está suficientemente organizada para que podáis implementar fácilmente este componente.

React Tabs

Un componente para pestañas con React JavaScript de gran facilidad de uso y bien accesible. Desde la página ejemplo podéis acceder al repositorio en Github. Ponen diversos ejemplos como uno en el que hay una pestaña que está desactivada por defecto. Se puede usar el tabulador para poner el foco en las pestañas y usar las teclas de dirección para cambiar entre las mismas.

M- Tabs

Pestañas nativas para React tanto para web como para nativo. Tenéis diversos ejemplos en la página dada para así ver cómo se comporta este componente. En la esquina superior derecha tenéis el enlace al repositorio Github por si queréis saber más o tomarlo para vuestro sitio web.

React Native Material Tabs

Tal como su propio nombre indica, está dirigido a Material Design para la implementación de pestañas. No tenemos página ejemplo, pero si su repositorio Github donde podéis encontrar todo lo que se necesita para su integración.

React Native Tab View

Un componente pestaña cross plataforma para React Native. Es una implementación solo en JavaScript y que permite usar gestos para pasar entre las distintas pestañas. Se caracteriza por ser muy personalizable, lo que permite realizar todo tipo de florituras.

React native tabbar navigator

Un componente para pestañas React que crea un excelente navegador más una barra de pestañas.

React Native Tabs

Pestaña React Nativa como plataforma independiente que podía ser usado para pestañas inferiores a la vez que vistas seccionadas. Con este terminamos la serie de pestañas para React. Os dejamos con una serie de formularios en CSS para que podáis echarle un ojo y así mirar si os vienen bien para vuestro sitio web.