# ibrahim-design-library

> Ibrahim design library

Latest version **0.0.5** (published 2023-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install ibrahim-design-library
pnpm add ibrahim-design-library
yarn add ibrahim-design-library
bun add ibrahim-design-library
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2023-05-08 |
| First published | 2023-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 558.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vivasoft |
| Maintainers | ibrahim6210 |

## Links

- npm: https://www.npmjs.com/package/ibrahim-design-library
- npm.io page: https://npm.io/package/ibrahim-design-library

## Dependencies (2)

- [tailwindcss](https://npm.io/package/tailwindcss.md) ^3.3.2
- [rollup-plugin-copy](https://npm.io/package/rollup-plugin-copy.md) ^3.4.0

## Recent versions

- 0.0.5 (latest) — 2023-05-08
- 0.0.4 — 2023-05-08
- 0.0.3 — 2023-05-08
- 0.0.2 — 2023-05-08
- 0.0.1 — 2023-05-08

## README

# vivasoft-component-library

A react and tailwind component library.

## Installation

Use the package manager npm to install the package.

```bash
npm install vivasoft-component-library
or
yarn add vivasoft-component-library
```

This component library internally uses TailwindCSS to compose it's design. So TailwindCSS need to be installed as dependency.

```bash
npm install -D tailwindcss postcss autoprefixer
or
yarn add --dev vivasoft-component-library
```

after that initialise Tailwind in the project.

```bash
npx tailwindcss init -p
```

Allow Tailwind compiler to apply css on the library code.

```bash
module.exports = {
  content: [
    ...
    './node_modules/vivasoft-component-library/**/*.{js,ts,jsx,tsx,mdx,cjs}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

Set up the Tailwind directives inside the global css file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```


## Usage

```javascript
import { Table, Button } from 'vivasoft-component-library'

export default function Home() {
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      bordered={true}
      fontFamily="font-inter"
      className="tableRootClass"
      borderProps={{
        border: "border-collapse",
        width: "border-b-[1px]",
        color: "border-[#dbdef0]",
      }}
      rowClassName={(row) => {
        if (row.key % 2 === 0) {
          return "even-row";
        }
        return "odd-row";
      }}
    />
  );
}
```

## Contributing

Pull requests are welcome. For major changes, please open an issue first
to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/ibrahim-design-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._