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として提供しています。
// with npm
npm install smarthr-ui
// with yarn
yarn add smarthr-ui
// with pnpm
pnpm add smarthr-uipeerDependencies として 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の条件に従ってライセンスされています。