Nitro UI

React Component Library for Life Science Apps

Documentation Quickstart

Development

Scripts

This project uses pnpm as the package manager. Here's a list of available scripts:

Frequently Used in Local dev

• dev: Runs Storybook development server on port 6006.
• format:fix: Fixes code formatting issues using Prettier.
• lint:fix: Fixes linting issues automatically.
• build: Lints, builds the project, and generates CSS.
• build-css: Builds and minifies Tailwind CSS.
• test: Runs tests using Vitest.

CI

• build:ci: Builds the project for CI environments.
• build-storybook: Builds Storybook for production.
• format: Checks code formatting using Prettier.
• lint: Runs TypeScript compiler and ESLint.

Publishing/Library dev

• publish: Publishes the package to NPM.
• prepublishOnly: Runs linting, formatting, and build before publishing.
• build:watch: Watches for changes and rebuilds the project.
• test:watch: Runs tests in watch mode.

Usage

To run a script, use:

pnpm <script-name>

For example:

pnpm dev

This will start the Storybook development server.

Notable Dependencies

Frameworks

• React

Runtime Utilities

• @tanstack/react-query (Data fetching and state management)
• Zod (Schema validation)
• @tanstack/react-table (Table component library)
• React Hook Form (Form handling)

Buildtime Utilities

• Vite (Build tool and development server)
• TypeScript (Static typing)
• ESLint and Prettier (Code linting and formatting)
• Vitest (Testing framework)
• Storybook (UI component development and documentation)

Styling

• Tailwind CSS (Utility-first CSS framework)
• DaisyUI (Tailwind CSS component library)
• Radix UI (Accessible UI components)
• Headless UI (Unstyled, accessible UI components)
• Hero Icons (SVG icon set)

Data Viz

• MolStar (Molecular visualization)
• RDKit (Cheminformatics and machine learning toolkit)