SmartHR は、SmartHR 基本機能からはじまり、今では多くのオプション機能を提供しています。 SmartHR UI はそのすべてのアプリケーションの UI コンポーネントを共通化して、開発生産性や完成度を向上させるための UI コンポーネントライブラリです。

コンポーネント

masterブランチのコンポーネント一覧は Storybook から確認できます。 https://story.smarthr-ui.dev

インストール

SmartHR-UI はnpm packageとして提供しています。

// with npm
npm install smarthr-ui

// with yarn
yarn add smarthr-ui

// with pnpm
pnpm add smarthr-ui

peerDependencies として React, React-DOM, styled-components が必要です。

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

使いかた

最もシンプルで簡単な使用例を紹介します。

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 = () => (
  <ThemeProvider theme={theme}>
    <Button variant="primary">Hello World</Button>
  </ThemeProvider>
)

const container = document.getElementById('app')
const root = createRoot(container)
root.render(<App />)

コントリビュート

SmartHR UI は OSS です。コントリビュートをお待ちしています。

更新履歴

更新履歴はReleasesを確認してください。

デザイン・ロゴの利用について

• SmartHR UI のデザインデータはFigmaで公開しています。
• SmartHR のロゴを利用する場合はSmartHR Design Systemの利用規約を確認してください。

ライセンス

このプロダクトはMITの条件に従ってライセンスされています。