React components for life science
Build sequence interfaces, laboratory plate editors, and molecular structure views with Nitro Bio's published React packages. Try the interactive examples, then bring the same components into your application.
Choose a component
| Package | Use it for | Documentation |
|---|---|---|
@nitro-bio/sequence-viewers 2.1.0 | Residue-level sequences, linear overviews, circular maps, and optional browser alignment | Sequence Viewer, Linear Viewer, Circular Viewer |
@nitro-bio/platemap 2.0.3 | Layered plate layouts, well selection, annotations, and CSV/JSON workflows | Platemap |
@nitro-bio/molstar-easy 0.0.19 | Interactive molecular structures with labels and residue colors | Molecule Viewer |
Start with a sequence viewer
Install the package alongside React and React DOM:
pnpm add @nitro-bio/sequence-viewers@^2.1.0
Import the compiled stylesheet once in your application entry point. In a Next.js App Router project, use your root layout:
import "@nitro-bio/sequence-viewers/styles.css";
Sequence Viewers 2 supports React 18.2+ and React 19. It ships its own component CSS, so your application does not need Tailwind. In Next.js, interactive examples that use React state belong in a component marked "use client".
Continue with the Sequence Viewer example for controlled selection, annotations, and alignment.
What changed in version 2
Sequence Viewer styles are isolated from the host page and use --nsv-color-sequences-* theme variables. Validation recovers locally by default, and browser alignment is an explicit opt-in. See the migration notes before updating an existing integration.
Platemap now uses a layer-based state model shared by Plate and PlateControls. Its examples use the current published package and public stylesheet. See the Platemap quick start.
Source and support
Each package has its own license; check its documentation before integrating. Send documentation questions to nitroui@nitro.bio.
Documentation for tools and agents
Use the Markdown index for pages with code examples and API guidance, without rendered demo output. A combined reference is also available. These files are generated from the same source as this website.