Nitro UI Quickstart
Install
npm i @nitro-bio/nitro-ui
# or yarn add @nitro-bio/nitro-ui
# or pnpm i @nitro-bio/nitro-ui
Styling
This project is built on top of tailwindcss.
If you also want to use tailwindcss in your project, you can follow the installation instructions to get started.
Once you've done so, add @nitro-bio/<package-name> to your tailwind.config.js file and define a brand and noir color:
const colors = require("tailwindcss/colors");
export default {
darkMode: "class",
content: [
...
"./node_modules/@nitro-bio/sequence-viewers/dist/nitro-ui.es.js",
],
theme: {
...
extend: {
...
colors: {
...
brand: colors.emerald,
noir: colors.zinc,
},
},
},
plugins: [],
};
If you don't want to use tailwind in your project, you can import the compiled css file from the dist folder. The brand and noir colors will be tailwind's emerald and zinc colors.
import "path/to/node_modules/@nitro-bio/<package_name>/dist/nitro.css";
Dark Mode
To use the component in dark mode, you can add the dark class to the parent element.
<body className="dark">
<!-- Your content here -->
</body>
If you're using tailwindcss, you may also need to change darkMode to selector in your tailwind.config.js file:
export default {
...,
darkMode: "selector",
};