Collection
Post cover
Created 5 month back

19 Best React Tabs

Collection of free Tabs created with React. Tabs code examples from github and other resources.

React Native Head Tab View

Author: zyslife; February 9, 2020

Links: github

Add collapsible headers to your tab-view components.

React Tabs

Author: Jonathan Obino; January 30, 2016

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Tabs Component with React

Author: Duc Nguyen; August 12, 2015

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Simple tabs component with React JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: react-with-addons.js

Swipeable Tabs

Author: Swiggy; October 23, 2019

Links: github

React Tabs Component that supports Swiping across screen to switch tabs.

React Native Collapsible Tab View

Author: PedroBern; November 19, 2020

Links: github

A cross-platform collapsible tab view component for React Native.

React Tabs

Author: Anthony Dugois; February 12, 2016

Links: demo and code

Made with: HTML / CSS (PostCSS) / JS (Babel)

This is the way I prefer to set tabs using React. The most tabs systems I found on the web do not let you to compose properly each part of them (e.g. put a button in a tab), or are too complicated.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

React Tabs Component

Author: Piotr Modes; February 24, 2019

Links: demo and code

Made with: HTML / CSS / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

React Tabs With Bootstrap

Author: Amanda Williamson; November 5, 2015

Links: demo and code

Made with: HTML / CSS / JS (Babel)

Simple example of a tab navigation built with React.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css

Animated React Tabs

Author: Joseph Martucci; January 31, 2016

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Animated tabs built with React, animated using Velocity (for the springy tracker) and ReactCSSTransitionGroup for the tabs themselves.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: react-with-addons.js, velocity.js

React Tabs

Author: Ron San Jose; June 11, 2017

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

React Tabs

Author: Tobi Weinstock; August 11, 2015

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Experiment with React JS and Flexbox.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css, JSXTransformer.js

React Tabs

Author: Jacob Pease; June 16, 2018

Links: demo and code

Made with: HTML / CSS / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Post cover

React Tabs

Author: Ustariz Enzo; December 21, 2020

Links: github, youtube

Very short, straight to the point and informative react tabs.

React Headless Tabs

Author: Pier-Luc Gendreau; September 11, 2020

Links: github

Headless, simple, and highly flexible tab-like primitives built with React hooks.

React: Tabs

Author: Aleh Isakau; December 10, 2015

Links: demo and code

Made with: HTML / CSS / JS (Babel)

Simple tabs in React.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

React Native Paper Tabs

Author: webRidge; December 25, 2020

Links: github

Smooth and fast cross platform Material Design Tabs for React Native Paper.

React Tabs

Author: Josh; March 25, 2016

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

React Tabs Composition

Author: Travis Arnold; October 17, 2016

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Animated React tabs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -, element-resize-detector.js, get-node-dimensions.js, react-motion.js, react-measure.js, react-aria-deps.js, react-aria.js, react-fluid-container.js

React Tabs

Author: c0deNinja; April 30, 2017

Links: demo and code

Made with: HTML / CSS / JS (Babel)

Playing around with creating an dynamic tab component for React.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback