nova-ui-kit
v1.1.12
Published
Component library for multiple apps related to insect monitoring.
Downloads
1,866
Readme
Nova UI Kit
Nova UI Kit is a React library with components related to insect monitoring. We use shadcn/ui as a component reference. Components are built using Radix UI and Tailwind CSS. We use Storybook as a visual and interactive documentation of the code version of the UI Kit.
- Storybook: https://nova-ui-kit.netlify.app/
- NPM package: https://www.npmjs.com/package/nova-ui-kit
To use the library in your app
1. Add Tailwind and its configuration
Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Add this import header to your main css file:
@tailwind base;
@tailwind components;
@tailwind utilities;
2. Install Nova UI Kit
npm install nova-ui-kit
3. Configure styles
Include some base styles in your root component:
import 'nova-ui-kit/dist/style.css'
Update Tailwind config with theme settings:
import { CONSTANTS } from 'nova-ui-kit'
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// ...
'./node_modules/nova-ui-kit/**/*.js',
],
theme: {
colors: CONSTANTS.COLORS,
extend: {
backgroundImage: CONSTANTS.GRADIENTS,
colors: CONSTANTS.COLOR_THEME,
},
},
plugins: [require("tailwindcss-animate")]
}
The theme can be tweaked as needed for the specific project.
For development
System requirements
- Node
- NPM
The .nvmrc
file in project root describes the recommended Node version for this project.
Run example app
# Install dependencies
npm install
# Run app in development mode
npm run dev
The example app will now be available in a browser on http://localhost:5173/. Hot reload will be enabled by default.
Run Storybook
# Install dependencies
npm install
# Run Storybook in development mode
npm run storybook
Storybook will now be available in a browser on http://localhost:5174/.
Publish Storybook
Storybook is automatically published when changes are pushed to branch main
.
Add a new component
First, checkout the list of available components. Then use the CLI to add a component to the project. This will create a new component in folder /src/components/ui
and install any dependencies it might have. Since the component is copied to the project, not installed as a dependency, it can be tweaked as needed.
npx shadcn-ui@latest add [component-name]
Publish to NPM
First, make sure you have a NPM user and have access to update the package nova-ui-kit
. Then, make your changes and bump the version in package.json
. To publish the changes:
# Login to NPM from terminal
npm login
# Generate package files
npm run pre-publish
# Publish the changes
npm publish
Go to https://www.npmjs.com/package/nova-ui-kit and checkout the changes!