Visu is a component library and design system developed for Coaktion products. The library uses Vite for development and build, React for components and Tailwindcss for the design system.

Installing

Install the library in a React project with the command

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.

// 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.

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

Using

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

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

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

export default App

License

Copyright