Explore thousands of open source components to build your apps

Discover reusable components with minimal dependencies shared by developers around the world. Choose and use components to build your applications.
THE BEST OF

REACT CHARTS

Displaying analytics in a visual way can be done with charts of all types. The best open source React charts are now available as components.
primereact /
chart
v3.1.0
Chart components are based on Charts.js, an open source HTML...
Build: Pass
public
mit
recharts /
line-chart
v1.6.2
Line chart React component
Build: Pass
public
mit
recharts /
composed-chart
v1.6.2
Composed chart React component
Build: Pass
public
mit
recharts /
area-chart
v1.6.2
Area chart React component
Build: Pass
public
mit
recharts /
bar-chart
v1.6.2
Bar chart React component
Build: Pass
public
mit
grommet /
chart
v2.6.5
A graphical chart.
Build: Pass
public
apache
recharts /
scatter-chart
v1.6.2
Scatter chart React component
Build: Pass
public
mit
recharts /
pie-chart
v1.6.2
Pie chart React component
Build: Pass
public
mit
primereact /
organizationchart
v3.1.0
OrganizationChart visualized hierarchical organization data.
Build: Pass
public
mit
recharts /
radar-chart
v1.6.2
Radar chart React component
Build: Pass
public
mit
recharts /
radial-bar-chart
v1.6.2
Radial bar chart React component
Build: Pass
public
mit
chevron_leftLeft
More Examples
Rightchevron_right
recharts /
composed-chart
v1.6.2
Composed chart React component
Build: Pass
public
mit
recharts /
area-chart
v1.6.2
Area chart React component
Build: Pass
public
mit
primereact /
chart
v3.1.0
Chart components are based on Charts.js, an open source HTML...
Build: Pass
public
mit
recharts /
line-chart
v1.6.2
Line chart React component
Build: Pass
public
mit

React Buttons

Buttons are the most popular UI components in Bit's community. Find the best buttons to help users take actions in your React applications.
react-bootstrap /
button-group
v1.0.0
Sets the size for all Buttons in the group.
Build: Pass
public
mit
semantic-ui-react /
button
v0.86.0
A Button indicates a possible user action
Build: Pass
public
mit
material-ui /
button
v3.9.2
Buttons allow users to take actions, and make choices, with ...
Build: Pass
public
mit
react-bootstrap /
button
v1.0.0
One or more button variant combinations
Build: Pass
public
mit
semantic-ui-react /
confirm
v0.86.0
Called when the Modal is closed without clicking confirm.
Build: Pass
public
mit
primereact /
button
v3.1.0
Button is an extension to standard input element with icons ...
Build: Pass
public
mit
le
shared-ui /
toggle-button
v0.0.3
Renders an icon and a text into an `PrimaryButton`.
Build: Pass
public
mit
primereact /
splitbutton
v3.1.0
SplitButton groups a set of commands in an overlay with a de...
Build: Pass
public
mit
material-ui /
icon-button
v3.9.2
Refer to the [Icons](/style/icons/) section of the documenta...
Build: Pass
public
mit
le
shared-ui /
date-picker
v0.0.4
Renders a HTML Button element and a dropdown list into a par...
Build: Pass
public
mit
Build: Pass
public
mit
material-ui /
button-base
v3.9.2
`ButtonBase` contains as few styles as possible
Build: Pass
public
mit
Build: Pass
public
apache
sa
ui-components /
store
v1.0.10
Beautified button for AppStore/PlayMarket redirecting
Build: Pass
public
mit
grommet /
radio-button
v2.6.5
A radio button control.
Build: Pass
public
apache
react-foundation /
button-group
v0.9.6
Button groups are containers for related action items. They'...
Build: Pass
public
mit
primereact /
radiobutton
v3.1.0
RadioButton is an extension to standard radio button element...
Build: Pass
public
mit
grommet /
drop-button
v2.6.5
A Button that controls a Drop. When opened, the Drop will co...
Build: Pass
public
apache
chevron_leftLeft
More Examples
Rightchevron_right
react-bootstrap /
button-group
v1.0.0
Sets the size for all Buttons in the group.
Build: Pass
public
mit
semantic-ui-react /
button
v0.86.0
A Button indicates a possible user action
Build: Pass
public
mit
material-ui /
button
v3.9.2
Buttons allow users to take actions, and make choices, with ...
Build: Pass
public
mit
react-bootstrap /
button
v1.0.0
One or more button variant combinations
Build: Pass
public
mit
semantic-ui-react /
confirm
v0.86.0
Called when the Modal is closed without clicking confirm.
Build: Pass
public
mit
primereact /
button
v3.1.0
Button is an extension to standard input element with icons ...
Build: Pass
public
mit

React Tables

Tables are the most comfortable way to display data. Now it's easier than ever with tables as React components.
grommet /
data-table
v2.6.5
A data driven table.
Build: Pass
public
apache
semantic-ui-react /
table
v0.86.0
A table can use fixed a special faster form of table renderi...
Build: Pass
public
mit
react-bootstrap /
table
v1.0.0
Adds zebra-striping to any table row within the `<tbody>`.
Build: Pass
public
mit
material-ui /
table
v3.9.2
Data tables display information in a way that’s easy to scan...
Build: Pass
public
mit
Build: Pass
public
mit
material-ui /
table-sort-label
v3.9.2
A button based label for placing inside `TableCell` for colu...
Build: Pass
public
mit
le
shared-ui /
list-builder
v0.0.3
Renders a responsive table into a parent container;
Build: Pass
public
mit
grommet /
table
v2.6.5
A table of data organized in cells.
Build: Pass
public
apache
material-ui /
table-pagination
v3.9.2
A `TableCell` based component for placing inside `TableFoote...
Build: Pass
public
mit
primereact /
treetable
v3.1.0
TreeTable is used to display hierarchical data in tabular fo...
Build: Pass
public
mit
Build: Pass
public
mit
Build: Pass
public
mit
material-ui /
table-cell
v3.9.2
`<TableCell>` will be rendered as an `<th>`or `<td>` dependi...
Build: Pass
public
mit
Build: Pass
public
mit
material-ui /
table-row
v3.9.2
Will automatically set dynamic row height based on the mater...
Build: Pass
public
mit
primereact /
datatable
v3.1.0
DataTable displays data in tabular format.
Build: Pass
public
mit
chevron_leftLeft
More Examples
Rightchevron_right

React Navigations

React navigation bars, breadcrumbs, paginations and tabs components to help users successfully navigate through your application and items.
semantic-ui-react /
tab
v0.86.0
Called on tab change.
Build: Pass
public
mit
react-bootstrap /
navbar
v1.0.0
The general visual variant a the Navbar. Use in combination ...
Build: Pass
public
mit
semantic-ui-react /
pagination
v0.86.0
Called on change of an active page.
Build: Pass
public
mit
react-bootstrap /
tabs
v1.0.0
Mark the Tab with a matching `eventKey` as active.
Build: Pass
public
mit
semantic-ui-react /
sidebar
v0.86.0
Called before a sidebar begins to animate out.
Build: Pass
public
mit
primereact /
sidebar
v3.1.0
Sidebar is a panel component displayed as an overlay.
Build: Pass
public
mit
semantic-ui-react /
breadcrumb
v0.86.0
A breadcrumb is used to show hierarchy between content.
Build: Pass
public
mit
react-bootstrap /
nav
v1.0.0
The visual variant of the nav items.
Build: Pass
public
mit
sa
ui-components /
tabbar
v1.0.4
Styled tabs component
Build: Pass
public
mit
react-bootstrap /
breadcrumb
v1.0.0
ARIA label for the nav element https://www.w3.org/TR/wai-ari...
Build: Pass
public
mit
react-foundation /
pagination
v0.9.6
Pagination is a type of navigation that lets users click thr...
Build: Pass
public
mit
Build: Pass
public
mit
Build: Pass
public
mit
material-ui /
table-pagination
v3.9.2
A `TableCell` based component for placing inside `TableFoote...
Build: Pass
public
mit
wired-elements /
wired-tabs
v1.0.0
Hand-drawn sketchy Tabs web component.
Build: Pass
public
mit
react-bootstrap /
pagination
v1.0.0
Set's the size of all PageItems.
Build: Pass
public
mit
material-ui /
tabs
v3.9.2
Tabs make it easy to explore and switch between different vi...
Build: Pass
public
mit
Build: Pass
public
mit
react-foundation /
tabs
v0.9.6
Tabs are elements that help you organize and navigate multip...
Build: Pass
public
mit
chevron_leftLeft
More Examples
Rightchevron_right
semantic-ui-react /
tab
v0.86.0
Called on tab change.
Build: Pass
public
mit
react-bootstrap /
navbar
v1.0.0
The general visual variant a the Navbar. Use in combination ...
Build: Pass
public
mit
semantic-ui-react /
pagination
v0.86.0
Called on change of an active page.
Build: Pass
public
mit
react-bootstrap /
tabs
v1.0.0
Mark the Tab with a matching `eventKey` as active.
Build: Pass
public
mit
semantic-ui-react /
sidebar
v0.86.0
Called before a sidebar begins to animate out.
Build: Pass
public
mit
primereact /
sidebar
v3.1.0
Sidebar is a panel component displayed as an overlay.
Build: Pass
public
mit

React Cards

Card components to display subjects such as items, profiles and categories. Help users choose and take action in your React application.
react-bootstrap /
card
v1.0.0
Sets card background
Build: Pass
public
mit
material-ui /
card
v3.9.2
Cards contain content and actions about a single subject.
Build: Pass
public
mit
Build: Pass
public
mit
react-bootstrap /
card
v1.0.0
Sets card background
Build: Pass
public
mit
material-ui /
card
v3.9.2
Cards contain content and actions about a single subject.
Build: Pass
public
mit
Build: Pass
public
mit
wired-elements /
wired-card
v1.0.0
wired-card is s a container for other web elements - with a ...
Build: Pass
public
mit
Build: Pass
public
mit
primereact /
card
v3.1.0
Card is a flexible container component.
Build: Pass
public
mit
Build: Pass
public
mit
chevron_leftLeft
More Examples
Rightchevron_right
Card components to display subjects such as items, profiles and categories. Help users choose and take action in your React application.
See More React Cards
React Menus
Every React app needs header, dropdown and tab menus to help users navigate. Choose the menu you need from popular open source components.
react-foundation /
menu
v0.9.6
Our flexible menu component makes it easy to build many comm...
Build: Pass
public
mit
react-bootstrap /
dropdown
v1.0.0
Determines the direction and location of the Menu in relatio...
Build: Pass
public
mit
material-ui /
menu
v3.9.2
Menus display a list of choices on temporary surfaces.
Build: Pass
public
mit
semantic-ui-react /
menu
v0.86.0
onClick handler for MenuItem.
Build: Pass
public
mit
primereact /
megamenu
v3.1.0
MegaMenu is navigation component that displays submenus toge...
Build: Pass
public
mit
primereact /
tabmenu
v3.1.0
Menu is a navigation/command component that displays items a...
Build: Pass
public
mit
material-ui /
list-item-icon
v3.9.2
A simple wrapper to apply `List` styles to an `Icon` or `Svg...
Build: Pass
public
mit
primereact /
tieredmenu
v3.1.0
TieredMenu displays submenus in nested overlays.
Build: Pass
public
mit
primereact /
menubar
v3.1.0
Menubar is a horizontal menu component.
Build: Pass
public
mit
primereact /
panelmenu
v3.1.0
PanelMenu is a hybrid of accordion-tree components.
Build: Pass
public
mit
grommet /
menu
v2.6.5
A control that opens a Drop containing plain Buttons.
Build: Pass
public
apache
primereact /
menu
v3.1.0
Menu is a navigation/command component that supports dynamic...
Build: Pass
public
mit
Build: Pass
public
mit
Build: Pass
public
mit
primereact /
contextmenu
v3.1.0
ContextMenu displays an overlay menu on right click of its t...
Build: Pass
public
mit
primereact /
slidemenu
v3.1.0
SlideMenu displays submenus with a slide animation.
Build: Pass
public
mit
chevron_leftLeft
More Examples
Rightchevron_right
react-foundation /
menu
v0.9.6
Our flexible menu component makes it easy to build many comm...
Build: Pass
public
mit
react-bootstrap /
dropdown
v1.0.0
Determines the direction and location of the Menu in relatio...
Build: Pass
public
mit
material-ui /
menu
v3.9.2
Menus display a list of choices on temporary surfaces.
Build: Pass
public
mit
semantic-ui-react /
menu
v0.86.0
onClick handler for MenuItem.
Build: Pass
public
mit
primereact /
megamenu
v3.1.0
MegaMenu is navigation component that displays submenus toge...
Build: Pass
public
mit
primereact /
tabmenu
v3.1.0
Menu is a navigation/command component that displays items a...
Build: Pass
public
mit

PICK US NOW

React Loaders

Loaders turn waiting for data into an awesome user experience, eliminating white screens and telling users that data is on its way. Choose an awesome loader animation component for your React app.
semantic-ui-react /
loader
v0.86.0
A loader alerts a user to wait for an activity to complete.
Build: Pass
public
mit
react-spinners /
bar-loader
v0.5.1
simple line bar loader which changes his speed while running
Build: Pass
public
mit
react-spinners /
rise-loader
v0.5.1
rising and falling five dots loader
Build: Pass
public
mit
jo
Build: Pass
public
mit
react-spinners /
skew-loader
v0.5.1
rotating triangle loader
Build: Pass
public
mit
react-spinners /
fade-loader
v0.5.1
circled loader with fading lines
Build: Pass
public
mit
xu
react-google-maps-loader /
react-google-maps-loader
v4.2.5
React Component to use google maps services into your react ...
Build: Pass
public
mit
jo
Build: Pass
public
mit
react-spinners /
clip-loader
v0.5.1
clipped pulsing spinner
Build: Pass
public
mit
react-spinners /
pulse-loader
v0.5.1
three pulsing dots loader
Build: Pass
public
mit
jo
Build: Pass
public
mit
jo
Build: Pass
public
mit
jo
Build: Pass
public
mit
react-spinners /
hash-loader
v0.5.1
circling four dots which turns into hash sign loader
Build: Pass
public
mit
react-spinners /
propagate-loader
v0.5.1
one dot splits into six dots loader
Build: Pass
public
mit
jo
Build: Pass
public
mit
react-spinners /
grid-loader
v0.5.1
flickering nine dots grid loader
Build: Pass
public
mit
jo
Build: Pass
public
mit
jo
Build: Pass
public
mit
jo
Build: Pass
public
mit
chevron_leftLeft
More Examples
Rightchevron_right
semantic-ui-react /
loader
v0.86.0
A loader alerts a user to wait for an activity to complete.
Build: Pass
public
mit
react-spinners /
bar-loader
v0.5.1
simple line bar loader which changes his speed while running
Build: Pass
public
mit
react-spinners /
rise-loader
v0.5.1
rising and falling five dots loader
Build: Pass
public
mit
jo
Build: Pass
public
mit