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-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の条件に従ってライセンスされています。
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent