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.
Install the library in a React project with the command
npm install @droz-js/visu
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:
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],
}
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'
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