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.umd.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",
};