https://github.com/kufu/smarthr-ui
React components for creating SmartHR applications.
https://github.com/kufu/smarthr-ui
hacktoberfest
Last synced: about 1 month ago
JSON representation
React components for creating SmartHR applications.
- Host: GitHub
- URL: https://github.com/kufu/smarthr-ui
- Owner: kufu
- License: mit
- Created: 2018-05-10T07:32:43.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2026-03-04T09:10:28.000Z (4 months ago)
- Last Synced: 2026-03-04T11:09:13.037Z (4 months ago)
- Topics: hacktoberfest
- Language: TypeScript
- Homepage: https://story.smarthr-ui.dev
- Size: 44.1 MB
- Stars: 950
- Watchers: 86
- Forks: 150
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
SmartHR は、SmartHR 基本機能からはじまり、今では多くのオプション機能を提供しています。
SmartHR UI はそのすべてのアプリケーションの UI コンポーネントを共通化して、開発生産性や完成度を向上させるための UI コンポーネントライブラリです。
[](https://badge.fury.io/js/smarthr-ui)
[](https://circleci.com/gh/kufu/smarthr-ui)
## コンポーネント
`master`ブランチのコンポーネント一覧は Storybook から確認できます。
https://story.smarthr-ui.dev
## インストール
SmartHR-UI は[npm package](https://www.npmjs.com/package/smarthr-ui)として提供しています。
```sh
// with npm
npm install smarthr-ui
// with yarn
yarn add smarthr-ui
// with pnpm
pnpm add smarthr-ui
```
peerDependencies として React, React-DOM, styled-components が必要です。
```sh
// with npm
npm install react react-dom styled-components
// with yarn
yarn add react react-dom styled-components
// with pnpm
pnpm add react react-dom styled-components
```
## 使いかた
最もシンプルで簡単な使用例を紹介します。
```tsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import { createTheme, ThemeProvider, Button } from 'smarthr-ui'
import 'smarthr-ui/smarthr-ui.css'
const theme = createTheme()
const App: React.FC = () => (
Hello World
)
const container = document.getElementById('app')
const root = createRoot(container)
root.render()
```
## コントリビュート
SmartHR UI は OSS です。[コントリビュート](https://github.com/kufu/smarthr-ui/blob/master/CONTRIBUTING.md)をお待ちしています。
## 更新履歴
更新履歴は[Releases](https://github.com/kufu/smarthr-ui/releases)を確認してください。
## デザイン・ロゴの利用について
- SmartHR UI のデザインデータは[Figma](https://www.figma.com/community/file/978607227374353992/SmartHR-UI)で公開しています。
- SmartHR のロゴを利用する場合は[SmartHR Design System](https://smarthr.design/)の利用規約を確認してください。
## ライセンス
このプロダクトは[MIT](https://github.com/kufu/smarthr-ui/blob/master/LICENSE)の条件に従ってライセンスされています。