#UI Components

Open-source projects categorized as UI Components

Top 23 UI Component Open-Source Projects

  • storybook

    📓 The UI component explorer. Develop, document, & test for React, Vue, Angular, Ember, Web Components, & more!

    Latest mention: TDD in a React frontend | reddit.com/r/reactjs | 2021-01-22

    We use Chromatic with Storyshots and it’s really great. Full CI and GitHub integration which builds and publishes a PR branch’s Storybook and creates a Visual PR showing all visual diffs for approval. It allows easier collaboration with your Product Manager too.

  • Semantic UI

    Semantic is a UI component framework based around useful principles from natural language.

  • vuetify

    🐉 Material Component Framework for Vue

    Latest mention: How To Use Vuetify With Vitejs | reddit.com/r/vuetifyjs | 2021-01-21

    More information here: https://github.com/vuetifyjs/vuetify/issues/11439#issuecomment-632580212

  • react-beautiful-dnd

    Beautiful and accessible drag and drop for lists with React

    Latest mention: Show HN: A cool Drag-and-Drop implementation for Svelte | news.ycombinator.com | 2021-01-11

    Not sure how similar it is, but [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) is pretty nice.

  • sortablejs

    Create and reorder lists with drag-and-drop. For use with modern browsers and touch devices

  • react-select

    The Select Component for React.js

  • react-virtualized

    React components for efficiently rendering large lists and tabular data

    Latest mention: Show HN: Full text search Project Gutenberg (60m paragraphs) | news.ycombinator.com | 2021-01-24

    [2] https://github.com/bvaughn/react-virtualized

  • react-native-elements

    Cross-Platform React Native UI Toolkit

    Latest mention: 11 Top React Native Component libraries to Use in 2020 | dev.to | 2020-10-15

    Github Stars: 19,500

  • react-dnd

    Drag and Drop for React

  • chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

    Latest mention: Weekly Developer Roundup #23 - Sun Nov 22 2020 | dev.to | 2020-11-21

    chakra-ui/chakra-ui (TypeScript): ⚡️ Simple, Modular & Accessible UI Components for your React Applications

  • NativeBase

    Essential cross-platform UI components for React Native

    Latest mention: 11 Top React Native Component libraries to Use in 2020 | dev.to | 2020-10-15

    Github Stars: 14,300

  • react-table

    ⚛️ Hooks for building fast and extendable tables and datagrids for React

    Latest mention: How to handle pagination with Fauna | dev.to | 2021-01-27

    To display the data we'll be using the react-table library. We would like to use the pagination query to get only the number of documents to be displayed on one page. To perform the API calls to fauna graphql endpoint, I'll use a react-query library with graphql-request.

  • Bit

    Build, distribute, and collaborate on components.

    Latest mention: What do people use to build websites for documentation for their framework/library? | reddit.com/r/Frontend | 2020-12-21

    Bit is great for component-sharing / documentation, but if you want to use it for free for private projects, you'll need to host the server yourself.

  • react-dates

    An easily internationalizable, mobile-friendly datepicker library for the web

    Latest mention: Things to Consider When Choosing a Component Library | dev.to | 2020-10-11

    This was the case for Airbnb with the popular react-dates project. They tried out solutions and had to change so much code that, at some point, they decided to build their own. The answer to the question of whether to create a component library is, as always, that it depends.

  • evergreen

    🌲 Evergreen React UI Framework by Segment

    Latest mention: Intro to Evergreen UI | dev.to | 2020-12-22
  • marko

    A declarative, HTML-based language that makes building web apps fun

  • Primer

    The CSS design system that powers GitHub

  • react-color

    :art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more

  • downshift 🏎

    🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

    Latest mention: Building my own components | reddit.com/r/reactjs | 2021-01-12

    There's also Downshift, but you have to build your own UI: https://github.com/downshift-js/downshift

  • react-slick

    React carousel component

    Latest mention: What's a good image carousel/slider these days? | reddit.com/r/web_design | 2021-01-02

    I've had good results using slick slider. https://kenwheeler.github.io/slick/ and the react version https://github.com/akiran/react-slick

  • react-sortable-hoc

    A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

  • victory

    A collection of composable React components for building interactive data visualizations

  • IBAnimatable

    Design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder with IBAnimatable.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2021-01-27.

Index

What are some of the best open-source UI Component projects? This list will help you:

Project Stars
1 storybook 57,466
2 Semantic UI 48,940
3 vuetify 29,305
4 react-beautiful-dnd 22,202
5 sortablejs 21,786
6 react-select 21,757
7 react-virtualized 20,855
8 react-native-elements 19,968
9 react-dnd 15,114
10 chakra-ui 14,736
11 NativeBase 14,633
12 react-table 13,390
13 Bit 12,805
14 react-dates 11,213
15 evergreen 10,396
16 marko 9,937
17 Primer 9,933
18 react-color 9,344
19 downshift 🏎 9,174
20 react-slick 9,157
21 react-sortable-hoc 9,035
22 victory 8,597
23 IBAnimatable 8,479