DEV Community

Jinseok
Jinseok

Posted on • Updated on

유명한 리액트 컴포넌트 라이브러리 모음

웹개발자의 큰 고민 중 하나는 UI다. 디자인이 안되거나 쏟을 시간이 없기 때문이다. 그렇다보니 bootstrap 같은 라이브러리가 인기있는게 아닐까?

다행히 큰 기업들이 오픈 소스로 자신의 컴포넌트를 공개해놨고 어느 정도 인지도 있는 라이브러리를 기록했다.

간단한 UI만 구현돼 있는 라이브러리도 있고 드랍다운, 테이블, 모달 등 복잡한 기능을 구현한 라이브러리도 있다.​ 단순히 UI를 구현하는 용도를 넘어 디자인시스템이나 코드구현 방식을 참고하기도 좋다.
※ react-router-dom을 위한 라이브러리다.

Ant Design

GitHub logo ant-design / ant-design

An enterprise-class UI design language and React UI library

Ant Design

An enterprise-class UI design language and React UI library.

CI status codecov NPM version NPM downloads

david deps david devDeps Total alerts

Follow Twitter FOSSA Status Discussions Issues need help

English | Português | 简体中文 | Українською

Features

  • 🌈 Enterprise-class UI designed for web applications.
  • 📦 A set of high-quality React components out of the box.
  • 🛡 Written in TypeScript with predictable static types.
  • ⚙️ Whole package of design resources and development tools.
  • 🌍 Internationalization support for dozens of languages.
  • 🎨 Powerful theme customization in every detail.

🖥 Environment Support

  • Modern browsers and Internet Explorer 11 (with polyfills)
  • Server-side Rendering
  • Electron
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

📦 Install

npm install antd
Enter fullscreen mode Exit fullscreen mode
yarn add antd
Enter fullscreen mode Exit fullscreen mode

🔨 Usage

import { Button, DatePicker } from 'antd';
const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select
Enter fullscreen mode Exit fullscreen mode


Base Web UI / Uber

GitHub logo uber / baseweb

A React Component library implementing the Base design language

Base Web React Components

Build status

Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.

Usage

On npm, you can find Base Web as baseui.

Add baseui and its peer dependencies to your project:

# using yarn
yarn add baseui styletron-react styletron-engine-atomic
# using npm
npm install baseui styletron-react styletron-engine-atomic
Enter fullscreen mode Exit fullscreen mode
import {Client as Styletron} from 'styletron-engine-atomic';
import {Provider as StyletronProvider} from 'styletron-react';
import {LightTheme, BaseProvider, styled} from 'baseui';
import {StatefulInput} from 'baseui/input';
const engine = new Styletron();

const Centered = styled('div', {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '100%',
});

export default function Hello () {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme
Enter fullscreen mode Exit fullscreen mode


Blueprint / Palantir

GitHub logo palantir / blueprint

A React-based UI toolkit for the web

Blueprint CircleCI

Blueprint is a React-based UI toolkit for the web.

It is optimized for building complex, data-dense web interfaces for desktop applications which run in modern browsers and IE11. This is not a mobile-first UI toolkit.

Read the introductory blog post ▸

View the full documentation ▸

Try it out on CodeSandbox ▸

Read frequently asked questions (FAQ) on the wiki ▸

Changelog

Blueprint's change log and migration guides for major versions live on the repo's Github wiki.

Packages

This repository contains multiple projects in the packages/ directory that fall into 3 categories:

Libraries

These are the component libraries we publish to NPM.

  • npm – Core styles & components.
  • npm – Components for interacting with dates and times.
  • npm – Components for generating and displaying icons.
  • npm – Popover2 and Tooltip2 components.
  • npm – Components for selecting items from a list.
  • npm – Scalable interactive table component.
  • npm – Components for picking timezones.

Applications

These are…



Chakra UI

GitHub logo chakra-ui / chakra-ui

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

Chakra logo

Build Accessible React Apps with Speed ⚡️

Bundle Size Language grade: JavaScript MIT License NPM Downloads Github Stars Discord

Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.

Looking for the documentation? 📝

For older versions, head over here => https://v0.chakra-ui.com

Latest version (v1) => https://chakra-ui.com

Features 🚀

  • Ease of Styling: Chakra UI contains a set of layout components like Box and Stack that make it easy to style your components by passing props Learn more
  • Flexible & composable: Chakra UI components are built on top of a React UI Primitive for endless composability.
  • Accessible. Chakra UI components follow the WAI-ARIA guidelines specifications and have the right aria-* attributes.
  • Dark Mode 😍: Most components in Chakra UI are dark mode compatible.

Support Chakra UI 💖

By donating $5 or more you can support the ongoing development of this project We'll appreciate some support. Thank you to all our…



Carbon / IBM

GitHub logo carbon-design-system / carbon

A design system built by IBM

Carbon Design System

Carbon Design System

Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

Carbon is released under the Apache-2.0 license CI workflow status Maintained with Lerna PRs welcome Chat with us on Gitter

Getting started

If you're just getting started, check out carbon-components. If you're looking for React components, take a look at carbon-components-react.

We also have community-contributed components for the following technologies:

If you're trying to find something specific, here's a full list of packages that we support!

Package name Description
carbon-components Component styles and Vanilla JavaScript
carbon-components-react React components
@carbon/elements IBM Design Language elements like colors, type, iconography, and more
@carbon/colors Work with IBM Design Language colors
@carbon/grid Build layouts using the new 16 column grid system
@carbon/icons Iconography assets. We also offer support in: React, Angular, Vue, and Svelte
@carbon/pictograms Pictogram assets. We


ElasticUI / Elastic

GitHub logo elastic / eui

Elastic UI Framework 🙌

Elastic UI Framework

The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React? No problem! You can still use the CSS behind each component.

You should check out our living style guide, which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. We also have a FAQ that covers common usage questions.

Installation

To install the Elastic UI Framework into an existing project, use the yarn CLI (npm is not supported).

yarn add @elastic/eui

Note that EUI has several peerDependencies requirements that will also need to be installed if starting with a blank project. You can read more about other ways to consume EUI.

yarn add @elastic/eui @elastic/datemath moment prop-types

Running Locally

Node

We depend upon the version of node defined in .nvmrc.

You will probably…



Evergreen / Segment

GitHub logo segmentio / evergreen

🌲 Evergreen React UI Framework by Segment

  • Works out of the box. Evergreen contains a set of polished React components that work out of the box.

  • Flexible & composable. Evergreen components are built on top of a React UI Primitive for endless composability.

  • Enterprise-grade. Evergreen features a UI design language for enterprise-grade web applications.

Documentation & Community

Evergreen v5 to v6 Migration guide

Evergreen v5 to v6 migration guide

Install and use components

🌲 Evergreen is made up of multiple components and tools which you can import one by one. All you need to do is install the evergreen-ui package:

$ yarn add evergreen-ui
# or
$ npm install --save evergreen-ui
Enter fullscreen mode Exit fullscreen mode

A working version, assuming you are using something like Create React App, might look like this:

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'
ReactDOM.render(<Button>I am using 🌲 Evergreen!
Enter fullscreen mode Exit fullscreen mode


Fluent / Microsoft

GitHub logo microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web

Build Status GitHub contributors GitHub top language Twitter Follow

🎉 🎉 🎉 Version 8 of @fluentui/react is now available on npm! 🎉 🎉 🎉

See the release notes for more info, and please file an issue if you have any problems.

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

This repo is home to 3 separate projects today. Mixing components between projects is not currently supported. The goal of these projects is to dedupe functionality and enable interoperability over time. For now, choose the project that best suits your needs.

The following table will help you navigate the 3 projects and understand their differences.

React React Northstar Web Components
Overview Mature, refreshing with new concepts from react-northstar. Newer, has concepts we're iterating on. Web Component implementation of Fluent UI.
Used By Office Teams Edge
Read Me README.md README.md README.md
Repo ./packages/react ./packages/fluentui/react-northstar ./packages/web-components
Quick Start Quick Start


material-ui

GitHub logo mui-org / material-ui

Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI logo

Material-UI

Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

license npm latest package npm next package npm downloads CircleCI Coverage Status Follow on Twitter Renovate status Average time to resolve an issue Crowdin Open Collective backers and sponsors

Installation

Material-UI is available as an npm package.

Stable channel v4

// with npm
npm install @material-ui/core
// with yarn
yarn add @material-ui/core
Enter fullscreen mode Exit fullscreen mode

⚠️ All ongoing work has moved to v5. The development of v4 is limited to important bug fixes, security patches and easing the upgrade path to v5.

Alpha channel v5

// with npm
npm install @material-ui/core@next @emotion/react @emotion/styled

// with yarn
yarn add @material-ui/core@next @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode
Older versions

Please note that @next will only point to pre-releases; to get the latest stable release use @latest instead.

Who sponsors Material-UI?

Diamond 💎

octopus doit-intl

Diamond Sponsors are those who have pledged…








Garden / Zendesk

GitHub logo zendeskgarden / react-components

🌱 garden React components

Garden React Components Build Status Dependency Status Coverage Status

🌱 Garden is the design system by Zendesk

Garden React provides consistent styling and behavior for Garden components React components are maintained following a multi-package approach where components are packaged and published individually, but combined under this single repository.

Installation

See the individual package README for the React component you would like to install.

Usage

Garden React packages are ready to use in a Create React App environment or together with standard Rollup or webpack build configurations.

Here is a simple example to get you started:

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Button } from '@zendeskgarden/react-buttons';
const App = () => (
  /* Include a ThemeProvider wrapper at
Enter fullscreen mode Exit fullscreen mode


Gestalt / Pinterest

GitHub logo pinterest / gestalt

A set of React UI components that supports Pinterest’s design language

Gestalt

NPM Version gestalt

Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and developers by enforcing a bunch of fundamental UI components. This common set of components helps raise the bar for UX & accessibility across Pinterest.

Visit the official Gestalt Documentation

Installation

The package can be installed via npm:

npm i gestalt --save
npm i gestalt-datepicker --save
Enter fullscreen mode Exit fullscreen mode

Or via yarn:

yarn add gestalt
yarn add gestalt-datepicker
Enter fullscreen mode Exit fullscreen mode

Usage

Gestalt exports each component as ES6 modules and a single, precompiled CSS file:

import { Text } from 'gestalt';
import 'gestalt/dist/gestalt.css';
Enter fullscreen mode Exit fullscreen mode

That syntax is Webpack specific (and will work with Create React App), but you can use Gestalt anywhere that supports ES6 module bundling and global CSS.

Development

Gestalt is a multi-project monorepo. The docs and components are all organized as separate packages that share similar tooling.

Install project…



Grommet

GitHub logo grommet / grommet

a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience

PRs Welcome slack follow blogs npm package npm downloads styled with prettier

Documentation

Visit the Grommet website for more information.

Support / Contributing

Before opening an issue or pull request, please read the Contributing guide.

Install

You can install Grommet using either of the methods given below.

For npm users:

  $ npm install grommet styled-components --save
Enter fullscreen mode Exit fullscreen mode

For Yarn users:

  $ yarn add grommet styled-components
Enter fullscreen mode Exit fullscreen mode

There are more detailed instructions in the Grommet Starter app tutorial for new apps. For incorporating Grommet into an existing app, see the Existing App version.

Explore

  1. Storybook examples per component, you can create them locally by running:

      $ npm run storybook
    Enter fullscreen mode Exit fullscreen mode

    or

      $ yarn storybook
    Enter fullscreen mode Exit fullscreen mode
  2. Basic code-sandbox playgrounds for each component.

  3. Templates, patterns, and starters: feel free to share with us more pattern ideas on Slack.

  4. End-to-end project examples from our community in the #i-made-this Slack channel.

  5. Read more from the Grommet team on Medium.

Stable

grommet…



Pluralsight

GitHub logo pluralsight / design-system

The UI building blocks for creating a cohesive design across Pluralsight products.








Polaris / Shopify

2018년 라이센스의 변경으로 Shopify와 관련된 앱을 만들 때 사용할 수 있다. 사용은 못해도 참고하기 좋다.

GitHub logo Shopify / polaris-react

Shopify’s admin product component library

Polaris React

npm version CI PRs Welcome

Polaris React is a component library designed to help developers create the best experience for merchants who use Shopify. Visit the Polaris style guide to learn more.

App development

For more information about creating apps for the Shopify App Store, take a look at the app development documentation.

Using the React components

While we do offer a CSS-only version, we strongly recommend using the React versions of our components. It’s the version that we use at Shopify. It allows for rich, complex components like Tabs and Popovers, and will not have as many breaking changes as the CSS-only version.

Installation

Run the following command using npm:

npm install @shopify/polaris --save
Enter fullscreen mode Exit fullscreen mode

If you prefer Yarn, use the following command instead:

yarn add @shopify/polaris
Enter fullscreen mode Exit fullscreen mode

Usage

  1. Import the CSS directly into your project if your asset packager supports it:
import '@shopify/polaris/dist/styles.css';
Enter fullscreen mode Exit fullscreen mode

Otherwise include the CSS in…



Primer / Github

GitHub logo primer / react

A React implementation of GitHub's Primer Design System

Primer React

A React implementation of GitHub's Primer Design System

Documentation

Our documentation site lives at primer.style/react. You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.

Installation

Install @primer /components in your project with your package manager of choice:

npm install @primer/components
// or

yarn add @primer/components

Roadmap

You can track our roadmap progress in the Roadmap Project Board, see more detail in the quarterly planning Discussions, and find a list of all the current epic tracking issues here.

Contributing

We love collaborating with folks inside and outside of GitHub and welcome contributions!

👉 See the contributing docs for more info on code style, testing, coverage, and troubleshooting.

New Component Proposals

We welcome and encourage new component proposals from internal GitHub teams! Our best work comes from collaborating directly with the teams using Primer React Components…



Rainbow

GitHub logo nexxtway / react-rainbow

🌈 React Rainbow Components. Build your web application in a snap.


React Rainbow Component logo

React Rainbow

React Rainbow is a collection of components that will reliably help you build your application in a snap. Give it a hack and let us know what you think

CircleCI npm version components Prettier Known Vulnerabilities Coverage Status License: MIT Maintainability

CLA assistant Gitter

Features

  • 90+ components built on top of React.
  • Interactive Examples.
  • First class testing.
  • Wdio page objects.
  • Redux-Form integration.
  • We designed each component with i18n in mind.
  • Accessibility is part of our definition of done.
  • Components with out-of-the-box Typescript typing.

🖥 Environment Support

Firefox
Firefox
Chrome
Chrome
Safari
Safari
last 2 versions last 2 versions last 2 versions

📦 Installation

React Rainbow Components is available as an npm package.

$ yarn add react-rainbow-components
Enter fullscreen mode Exit fullscreen mode
or
$ npm install react-rainbow-components --save
Enter fullscreen mode Exit fullscreen mode

⌨️ Usage

Here is a quick example to get you started. It's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-rainbow-components';
function App() {
    return <Button label
Enter fullscreen mode Exit fullscreen mode


React95

GitHub logo arturbien / React95

🌈🕹 Refreshed Windows 95 style UI components for your React app

React95

NPM circleCI build React95 version React95 license React95 license

Components - Demo app - Website - Slack - PayPal donation 💰

Refreshed Windows95 UI components for your modern React apps.
Built with styled-components 💅

hero

Support

Getting Started

First, install component library and styled-components in your project directory:

# yarn
$ yarn add react95 styled-components
# npm
$ npm i react95 styled-components
Enter fullscreen mode Exit fullscreen mode

Apply style reset, wrap your app with ThemeProvider with theme of your choice... and you are ready to go! 🚀

import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { styleReset, List, ListItem, Divider } from 'react95';
// pick a theme of your choice
import original from "react95/dist/themes/original";
// original Windows95 font (optionally)
import ms_sans_serif from "react95/dist/fonts/ms_sans_serif.woff2";
import ms_sans_serif_bold from "react95/dist/fonts/ms_sans_serif_bold.woff2";

const GlobalStyles = createGlobalStyle`
  @font-face {
    font-family: 'ms_sans_serif';
    src: url('${
Enter fullscreen mode Exit fullscreen mode


Ring UI / Jetbrains

GitHub logo JetBrains / ring-ui

A collection of JetBrains Web UI components

Ring UI — JetBrains Web UI components

Storybook Build Status Storybook Dependencies Status Dev Dependencies Status NPM version NPM downloads

official JetBrains project

This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.

Quick start

  1. Install Yeoman and Ring UI generator: npm install -g yo@next-4 @jetbrains/generator-ring-ui
  2. Go to the root directory of your project (create one if necessary), run yo @jetbrains/ring-ui and enter the name of the project. Then run npm install to install all the necessary npm dependencies.
  3. Your project is ready to be developed. The following commands are available
    • npm start to run a local development server
    • npm test to launch karma tests
    • npm run lint to lint your code
    • npm run build to build a production bundle
    • npm run create-component to create a new component template with styles and tests

Not-so-quick start

In case boilerplate generators are not your thing and you prefer to…



Semantic

GitHub logo Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration

Semantic UI React

Gitter Circle Codecov David npm

Installation & Usage

See the Documentation for an introduction, usage information, and examples.

Built With

  • Amazon Publishing — the full-service publisher of Amazon — APub.com
  • Netflix's Edge Developer Experience team's numerous internal apps
  • Netflix's flamescope
  • Microsoft's Teams prototyping

Example Projects

This is a listing of example projects and guides that will help you integrate Semantic UI React into your new or existing projects.

Show projects

semantic-ui-react-todos

Semantic UI React implementation of react-redux Todo List.

FAQ

Can I use custom Icons? Yes. Just use <Icon className='my-icon' /> instead of <Icon name='my-icon' />. See https://github.com/Semantic-Org/Semantic-UI-React/issues/931#issuecomment-263643210 for detailed info and examples.
How do I setup CSS?

There are several options. Refer to our doc on CSS Usage.


Can I use a custom CSS theme?
Yes. Semantic UI React includes components that render valid Semantic UI HTML, no CSS is included. This allows you to load any Semantic





Discussion (0)