Overview:

Clarity React Binding is an unofficial implementation of VMware Clarity Design in React. It makes use of the CSS, icons, and images from the Clarity project. This project allows developers to easily incorporate the Clarity Design System into their React projects.

Features:

• Clarity Design System: This project leverages the popular Clarity Design System developed by VMware. It provides a set of robust and visually appealing UI components for React projects.
• Easy Integration: With Clarity React Binding, developers can easily add the Clarity Design System to their React projects. Simply import the styles and globals from peer dependencies and make use of the components in your app.
• Storybook Component Browser: Clarity React Binding includes Storybook as a component browser. This allows developers to easily browse and interact with the Clarity React components in isolation.

Installation:

To use Clarity React Binding in your React projects, follow these steps:

1. Add the dependencies to your project using yarn, npm, or any other package manager:

yarn add clarity-react-binding

2. Import the styles and globals from peer dependencies in your index.tsx file:

import "@clr/icons";
import "@clr/css/clr-ui.css";

3. Make use of the Clarity React components in your app by importing and using them in your App.tsx or other relevant files:

import { Button, Input } from "clarity-react-binding";

function App() {
  return (
    <div>
      <Button>Hello, Clarity!</Button>
      <Input placeholder="Enter your name" />
    </div>
  );
}

export default App;

4. To use the Storybook component browser, download the Clarity React Binding project from Git and install the dependencies using yarn, npm, or any other package manager. Then, run the following script:

yarn storybook

Summary:

Clarity React Binding is an unofficial implementation of VMware Clarity Design in React. It provides an easy way for developers to incorporate the Clarity Design System into their React projects. With a set of UI components and seamless integration, developers can quickly create visually appealing and user-friendly applications. The inclusion of Storybook as a component browser further enhances the development experience. Clarity React Binding and the Clarity Design System are licensed under Apache 2.0 and MIT license, respectively.