Jinseok

Posted on Aug 7, 2021 • Updated on Aug 20, 2021

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

#javascript #react #css

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

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

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

Ant Design

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

English | 中文

✨ 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 based on CSS-in-JS.

🖥 Environment Support

Modern browsers
Server-side Rendering
Electron

Edge	Firefox	Chrome	Safari	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 Install

npm install antd

yarn add antd

pnpm add antd

🔨 Usage

import React from 'react';
import { Button, DatePicker } from 'antd';
const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>

…

View on GitHub

⠀
⠀

Base Web UI / Uber

Base Web React Components

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-monolithic
# using npm
npm install baseui styletron-react styletron-engine-monolithic

import {Client as Styletron} from 'styletron-engine-monolithic';
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

…

View on GitHub

⠀
⠀

Blueprint / Palantir

Blueprint

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 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.

– Design system color variables.
– Core styles & components.
– Timezone-aware components for interacting with dates and times.
– Components for generating and displaying icons.
– Theme for monaco-editor (⚠️ experimental).
– Components for selecting items from a list.
– Scalable interactive table component.

Applications

These…

View on GitHub

⠀
⠀

Chakra UI

Build Accessible React Apps with Speed ⚡️

Chakra UI is a comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a diverse range of components that can be easily combined to build complex user interfaces while adhering to accessibility best practices.

Documentation

It's the https://chakra-ui.com website for the latest version of Chakra UI. For older versions head over here

v1: https://v1.chakra-ui.com
v0: https://v0.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…

View on GitHub

⠀
⠀

Carbon / IBM

carbon-design-system / carbon

A design system built by IBM

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.

Getting started

If you're just getting started, check out @carbon/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/react`	React components and styles
`@carbon/styles`	Sass styles for 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 also offer support in: React and Svelte
`@carbon/layout`	Layout-based

…

View on GitHub

⠀
⠀

ElasticUI / Elastic

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.

Check out our full documentation site which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. Our FAQ below covers common usage questions — for other general questions regarding EUI, check out the Discussions tab.

Frequently Asked Questions

What is the Elastic UI Framework?

The Elastic UI Framework (EUI) is a design library in use at Elastic to build React applications that need to share our branding and aesthetics. It distributes typed UI React components and static assets for use in building web layouts. Alongside the React components, we ship theme & style utilities that can be used independently on their own.

The primary goal of this library is to provide reusable UI components that can be used throughout…

View on GitHub

⠀
⠀

Evergreen / Segment

segmentio / evergreen

🌲 Evergreen React UI Framework by Segment

Evergreen, A Design System for the Web. Evergreen is a React UI Framework for building ambitious products on the web. Brought to you 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 v7 Migration guide

Evergreen v7 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

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!</Button>

…

View on GitHub

⠀
⠀

Fluent / Microsoft

microsoft / fluentui

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

Fluent UI Web

Fluent UI React is shipping its v9 final stable release. Visit the Fluent UI React v9 Release page on the wiki to learn more about the upcoming release schedule.

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. Combining Fluent UI React v9 components with Fluent UI React v8 or v0 components is possible and allows gradual migration to Fluent UI v9.

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

React Components (v9)	React (v8)	Web Components
Overview	New, future-proof and forward looking	Mature	Web Component implementation of Fluent UI.
Used By	Microsoft 365	Office	Edge
Read Me	README.md	README.md	README.md
Changelog	CHANGELOG.md	CHANGELOG.md	CHANGELOG.md
Repo	packages/react-components	./packages/react	./packages/web-components
Quick Start	Quick Start	Quick Start	See README.md
Docs	https://react.fluentui.dev/	aka.ms/fluentui-react	aka.ms/fluentui-web-components
NPM	`@fluentui/react-components`	`@fluentui/react`

…

View on GitHub

⠀
⠀

material-ui

mui / material-ui

MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

MUI Core

MUI Core contains foundational React UI component libraries for shipping new features faster:

Material UI is a comprehensive library of components that features our implementation of Google's Material Design system.
Joy UI is a library of beautifully designed React UI components built to spark joy.
Base UI is a library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app's CSS and accessibility features.
MUI System is a collection of CSS utilities to help you rapidly lay out custom designs.

Documentation

Material UI

Visit https://mui.com/material-ui/ to view the full documentation.

Older versions

Note: @next only points to pre-releases Use @latest for the latest stable release.

Joy UI

Visit https://mui.com/joy-ui/getting-started/ to view the full documentation.

Note: Joy UI is…

View on GitHub

⠀
⠀

Garden / Zendesk

zendeskgarden / react-components

🌱 garden React components

Garden React Components

🌱 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.

Package	Version	Size
`@zendeskgarden/react-accordions`
`@zendeskgarden/react-avatars`
`@zendeskgarden/react-breadcrumbs`
`@zendeskgarden/react-buttons`
`@zendeskgarden/react-chrome`
`@zendeskgarden/react-colorpickers`
`@zendeskgarden/react-datepickers`
`@zendeskgarden/react-drag-drop`
`@zendeskgarden/react-dropdowns`
`@zendeskgarden/react-dropdowns.next`
`@zendeskgarden/react-forms`
`@zendeskgarden/react-grid`
`@zendeskgarden/react-loaders`
`@zendeskgarden/react-modals`
`@zendeskgarden/react-notifications`
`@zendeskgarden/react-pagination`
`@zendeskgarden/react-tabs`
`@zendeskgarden/react-tables`
`@zendeskgarden/react-tags`
`@zendeskgarden/react-theming`
`@zendeskgarden/react-tooltips`
`@zendeskgarden/react-typography`

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

…

View on GitHub

⠀
⠀

Gestalt / Pinterest

pinterest / gestalt

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

Gestalt ·

Gestalt is Pinterest’s design system. Our system includes a React component library with comprehensive guidelines, best practices, tools, and resources to support designers and engineers delivering a high-quality product.

Visit the official Gestalt Documentation

Installation

The package can be installed via npm:

npm i gestalt --save
npm i gestalt-charts --save
npm i gestalt-datepicker --save

Or via yarn:

yarn add gestalt
yarn add gestalt-charts
yarn add gestalt-datepicker

Usage

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

import { Text } from 'gestalt';
import 'gestalt/dist/gestalt.css';
import 'gestalt/dist/gestalt-charts.css';
import 'gestalt/dist/gestalt-datepicker.css';

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 dependencies and run…

View on GitHub

⠀
⠀

Grommet

grommet / grommet

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

Grommet: focus on the essential experience

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

For Yarn users:

  $ yarn add grommet styled-components

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

Storybook examples per component, you can create them locally by running:
```
  $ npm run storybook
```
or
```
  $ yarn storybook
```
Basic code-sandbox playgrounds for each component.
Templates, patterns, and starters: feel free to share with us more pattern ideas on Slack.
End-to-end project examples from our community in the #i-made-this Slack channel.
Read more from the Grommet team on Medium.

Stable

grommet…

View on GitHub

⠀
⠀

Pluralsight

pluralsight / classic-design-system

This library (classic) is officially in maintenance mode only. For the latest library, please see the TVA project (https://pluralsight.github.io/tva/).

Pluralsight Design System

Important ⚠️

This library (classic) is officially in maintenance mode only.

We will only fix bugs and will no longer add new features. For the latest library, please follow the TVA project.

Get involved

Run locally

Install nvm

nvm install
nvm use

yarn config set ignore-engines true

yarn
yarn build
yarn start

Publishing packages

yarn publish:all

View on GitHub

⠀

⠀

Polaris / Shopify

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

Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.

Polaris

Build. Contribute. Evolve. Shape the merchant experience for Shopify’s core product, the admin.

Status	Owner	Help
Active	@shopify/polaris	New issue

About this repo

The shopify/polaris repository is an intergalactic monorepo made up of NPM packages, VSCode extensions, and websites.

polaris/
├── documentation               # Documentation for working in the monorepo
├── polaris-for-vscode          # VS Code extension for Polaris
├── polaris-icons               # Icons for Polaris
├── polaris-react               # Components for @shopify/polaris package
├── polaris-tokens              # Design tokens for Polaris
├── polaris.shopify.com         # Documentation website
└── stylelint-polaris           # Rules for custom property usage and mainline coverage

Commands

Install dependencies and build workspaces

yarn && yarn build

Run a command

One workspace

Run commands from a selected workspace using turbo run <command> --filter=<workspace>... flag.

Command	Runs
`yarn turbo run dev --filter=@shopify/polaris`	Open the react component storybook
`yarn turbo run dev --filter=polaris.shopify.com`	Open polaris.shopify.com NextJS site

All workspaces

Run commands across all workspaces. This…

View on GitHub

⠀
⠀

Primer / Github

primer / react

An implementation of GitHub's Primer Design System using React

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/react in your project with your package manager of choice:

npm install @primer/react

yarn add @primer/react

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.

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 in their projects…

View on GitHub

⠀
⠀

Rainbow

nexxtway / react-rainbow

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

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

✨ 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	Chrome	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

or

$ npm install react-rainbow-components --save

⌨️ 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

…

View on GitHub

⠀
⠀

React95

react95-io / React95

🌈🕹 Windows 95 style UI component library for React

React95

Components - Demo app - React Native - Slack - PayPal donation 💰

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

Support

Getting Started

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

# yarn
$ yarn add react95 styled-components
# npm
$ npm install react95 styled-components

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 { MenuList, MenuListItem, Separator, styleReset } 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`
  ${styleReset}
  @font-face {
    font-family:

…

View on GitHub

⠀
⠀

Ring UI / Jetbrains

JetBrains / ring-ui

A collection of JetBrains Web UI components

Ring UI — JetBrains Web UI components

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

Try now

Try the codesandbox, based on create-react-app tooling, to see and try the UI components
Check out list of examples for each component

Installation

npm install @jetbrains/ring-ui

Quick start

The easiest way is to import necessary components as ES modules:

// You need to import RingUI styles once
import '@jetbrains/ring-ui/dist/style.css';

import alertService from '@jetbrains/ring-ui/dist/alert-service/alert-service';
import Button from '@jetbrains/ring-ui/dist/button/button';

...

export const Demo = () => {
  return (
    <Button onClick={() => alertService.successMessage('Hello world')}>
      Click me
    </Button>
  );
};

The bundle size will depend on the amount of components you imported.

Building Ring

…

View on GitHub

⠀
⠀

Semantic

Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration

Semantic UI React

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 #931 (comment) 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

…

View on GitHub

Ant Design

ant-design / ant-design

An enterprise-class UI design language and React UI library

Ant Design

✨ Features

🖥 Environment Support

📦 Install

🔨 Usage

Base Web UI / Uber

uber / baseweb

A React Component library implementing the Base design language

Base Web React Components

Usage

Blueprint / Palantir

palantir / blueprint

A React-based UI toolkit for the web

Blueprint

Changelog

Packages

Libraries

Applications

Chakra UI

chakra-ui / chakra-ui

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

Build Accessible React Apps with Speed ⚡️

Table of contents

Documentation

Features

Carbon / IBM

carbon-design-system / carbon

A design system built by IBM

Carbon Design System

Getting started

ElasticUI / Elastic

elastic / eui

Elastic UI Framework 🙌

Elastic UI Framework

Frequently Asked Questions

What is the Elastic UI Framework?

Evergreen / Segment

segmentio / evergreen

🌲 Evergreen React UI Framework by Segment

Documentation & Community

Evergreen v7 Migration guide

Install and use components

Fluent / Microsoft

microsoft / fluentui

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

Fluent UI Web

material-ui

mui / material-ui

MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

MUI Core

Documentation

Material UI

Joy UI

Garden / Zendesk

zendeskgarden / react-components

🌱 garden React components

Garden React Components

Installation

Usage

Gestalt / Pinterest

pinterest / gestalt

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

Gestalt ·

Installation

Usage

Development

Grommet

grommet / grommet

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

Grommet: focus on the essential experience

Documentation

Support / Contributing

Install

Explore

Stable

Pluralsight

pluralsight / classic-design-system