https://github.com/emcecs/clarity-react
React Components for VMware Clarity UI and Clarity Design
https://github.com/emcecs/clarity-react
clarity clarityui javascript react react-components reactjs ui-components vmware-clarity
Last synced: 10 months ago
JSON representation
React Components for VMware Clarity UI and Clarity Design
- Host: GitHub
- URL: https://github.com/emcecs/clarity-react
- Owner: EMCECS
- License: apache-2.0
- Created: 2019-03-22T02:59:29.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-06-18T06:37:36.000Z (about 2 years ago)
- Last Synced: 2024-12-10T19:23:28.398Z (over 1 year ago)
- Topics: clarity, clarityui, javascript, react, react-components, reactjs, ui-components, vmware-clarity
- Language: TypeScript
- Size: 4.78 MB
- Stars: 40
- Watchers: 32
- Forks: 26
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# Clarity React Binding
This project an unofficial implementation of [VMware Clarity Design](https://clarity.design) in React. It leverages CSS, icons and images from the Clarity project.
## Usage in React projects
To use the project simply add the dependencies with `yarn`, `npm`, etc:
```shell
$ yarn add @dellstorage/clarity-react
```
Import styles and globals from peer dependencies:
#### `index.tsx`
```typescript
import "@webcomponents/custom-elements/custom-elements.min.js";
import "@clr/icons/clr-icons.min.css";
import "@clr/icons/clr-icons-lite.min.js";
import "@clr/ui/clr-ui.min.css"
import "@clr/icons/shapes/technology-shapes.js";
...
```
And make use of the components in your app:
#### `App.tsx`
```typescript jsx
import React, {Component} from 'react';
import MainContainer from "@dell/clarity-react/layout/main-container/MainContainer";
const initialState = {
};
type MainPageProps = {
token?: string
level?: string
message?: string
}
export type MainPageState = Readonly;
export default class MainPage extends Component {
readonly state: MainPageState = initialState;
render() {
return(
Hello
);
}
}
```
## Storybook
This project includes [Storybook](https://storybook.js.org/) as a component browser. To fire up storybook, download the project in Git:
```shell
$ git clone https://github.com/EMCECS/clarity-react.git
```
Install the dependencies with `yarn`, `npm`, etc.
```sbtshell
$ cd clarity-react
# Using yarn
$ yarn
# Using NPM
$ npm install
```
Any run the "storybook" script:
```shell
# Using yarn
$ yarn run storybook
# Using NPM
$ npm run storybook
```
## Licenses
* Clarity React components is licensed under Apache 2.0 License.
* The VMware Clarity Design System is licensed under the MIT license.