Usage

BharatUI components can be easily setup into your projects using the steps mentioned below.

HTML

Need to use our components in your HTML projects or pages? Easy, you can use our CDN in your project and get started.

Retrieve the latest stable CDN link from jsdelivr here.

Copy the CDN script and insert it at the end of the <body> tag in your HTML page as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Example HTML Page</title>
</head>
<body>

    <!--   <your content> -->

    <script src="https://cdn.jsdelivr.net/npm/bharat-ui@1.0.36/dist/public/bharat-ui.umd.min.js"></script>
</body>
</html>

Using the button component from our library:

<body>
    <!-- Using <BharatButton> inside your html page as below: -->
    <BharatButton size="small">Visit Us</BharatButton>

React

Since BharatUI is powered by WebComponents, it is frame-work agnostic and can be used in multiple frameworks such as React, Vue, Angular etc.

We are currently early-stage and have not tested our components with many other frameworks, but here’s how you can use the components inside a React project:

Install our npm package into your React project using the below npm command:
Terminal window
```
npm i bharat-ui
```

Now, let’s import the button component from bharat-ui npm package into App.jsx:

import { useState, React } from 'react'
import { BharatButton } from 'bharat-ui/react/components/button'


function App() {
const [count, setCount] = useState(0)
const handleClick = () => {
    console.log('Button clicked!');
};
return (
    <>
    <BharatButton onClick={handleClick}>Click Me</BharatButton>
    </>
)
}

export default App