# @droz-js/visu

> A library to use for coaktion projects!

Latest version **3.6.2** (published 2024-05-08) · 0 weekly downloads

## Install

```sh
npm install @droz-js/visu
pnpm add @droz-js/visu
yarn add @droz-js/visu
bun add @droz-js/visu
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.6.2 |
| Published | 2024-05-08 |
| First published | 2023-10-09 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 17 |
| Unpacked size | 886.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Maintainers | yagrrusso, adm-droz, onhate |
| Keywords | coaktion, ui, visu, vite, tailwind, components, components library, design system |

## Links

- npm: https://www.npmjs.com/package/@droz-js/visu
- Repository: https://github.com/Coaktion/Droz-Visu
- Homepage: https://main.d1rc90yigjmmrr.amplifyapp.com/
- Issues: https://github.com/Coaktion/Droz-Visu/issues
- npm.io page: https://npm.io/package/@droz-js/visu

## Dependencies (17)

- [cmdk](https://npm.io/package/cmdk.md) ^1.0.0
- [tailwindcss](https://npm.io/package/tailwindcss.md) ^3.4.1
- [react-day-picker](https://npm.io/package/react-day-picker.md) ^8.10.0
- [@radix-ui/react-tabs](https://npm.io/package/@radix-ui/react-tabs.md) ^1.0.4
- [@radix-ui/react-icons](https://npm.io/package/@radix-ui/react-icons.md) ^1.3.0
- [@radix-ui/react-toast](https://npm.io/package/@radix-ui/react-toast.md) ^1.1.5
- [@radix-ui/react-avatar](https://npm.io/package/@radix-ui/react-avatar.md) ^1.0.4
- [@radix-ui/react-dialog](https://npm.io/package/@radix-ui/react-dialog.md) ^1.0.5
- [@radix-ui/react-select](https://npm.io/package/@radix-ui/react-select.md) ^2.0.0
- [@radix-ui/react-switch](https://npm.io/package/@radix-ui/react-switch.md) ^1.0.3
- [@radix-ui/react-popover](https://npm.io/package/@radix-ui/react-popover.md) ^1.0.7
- [@radix-ui/react-tooltip](https://npm.io/package/@radix-ui/react-tooltip.md) ^1.0.7
- [@radix-ui/react-checkbox](https://npm.io/package/@radix-ui/react-checkbox.md) ^1.0.4
- [@radix-ui/react-accordion](https://npm.io/package/@radix-ui/react-accordion.md) ^1.1.2
- [@radix-ui/react-hover-card](https://npm.io/package/@radix-ui/react-hover-card.md) ^1.0.7
- [@radix-ui/react-radio-group](https://npm.io/package/@radix-ui/react-radio-group.md) ^1.1.3
- [@radix-ui/react-toggle-group](https://npm.io/package/@radix-ui/react-toggle-group.md) ^1.0.4

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 3.6.2 (latest) — 2024-05-08
- 3.6.1 — 2024-04-30
- 3.6.0 — 2024-04-29
- 3.5.0 — 2024-04-26
- 3.4.1 — 2024-04-16
- 3.4.0 — 2024-04-12
- 3.3.1 — 2024-04-08
- 3.3.0 — 2024-04-04
- 3.2.0 — 2024-03-22
- 3.1.1 — 2024-03-18
- 3.1.0 — 2024-03-15
- 3.0.1 — 2024-02-29
- 3.0.0 — 2024-02-14
- 2.6.2 — 2024-02-06
- 2.6.1 — 2024-01-22
- … 7 more at https://npm.io/package/@droz-js/visu/versions

## README

<p align="center">
  <picture>
    <img alt="Visu" src="public/visu.svg" height="48px" />
  </picture>
</p>

<p align="center">
  <a href="https://github.com/Coaktion/Droz-Visu/actions/workflows/build-and-test.js.yml">
    <img src="https://github.com/Coaktion/Droz-Visu/actions/workflows/build-and-test.js.yml/badge.svg" alt="CI/CD visu">
  </a>
</p>

Visu is a component library and design system developed for Coaktion products. The library uses [Vite](https://vitejs.dev) for development and build, [React](https://react.dev) for components and [Tailwindcss](https://tailwindcss.com) for the design system.

## Installing

Install the library in a React project with the command

```bash
npm install @droz-js/visu
```

## Configuration

Visu is built using Tailwind CSS as a basis for styling components, making it work in different environments. Based on this, there are 2 ways to install Visu to your project:

### Project *WITH* Tailwindcss

To use in projects **WITH** Tailwindcss it is necessary to import the styling of `@droz-js/visu/dist/theme-plugin` as a **plugin** and `@droz-js/visu/dist/visu.es.js` needs to be added to **content** in your `tailwind.config.js` file.

```typescript
// tailwind.config.ts
import VisuTailwindcssPlugin from '@droz-js/visu/dist/theme-plugin'

export default {
  content: ['./node_modules/@droz-js/visu/dist/visu.es.js'],
  plugins: [VisuTailwindcssPlugin],
}

```

### Project *WITHOUT* Tailwindcss

To use in projects **WITHOUT** Tailwindcss, you need to import the styling from `@droz-js/visu/styles` into your global styles file.

```typescript
// global.css
import '@droz-js/visu/styles'
```

## Using

Once the library is configured, simply import a component and add it to the project.

```typescript
import { Component } from '@droz-js/visu'

function App() {
  return <Component>...</Component>
}

export default App
```

## License

[Copyright](../../LICENSE)

---
_Source: https://npm.io/package/@droz-js/visu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._