React Sequence Viewer
The bioinformatics workhorse: DNA, RNA, or protein rendered as monospaced residues in a position-numbered grid, colored by base or by amino-acid property class, with click-drag range selection that reports the coordinates, length, and (for nucleotides) GC content. Turn on translate and it prints the amino-acid translation beneath each codon. All client-side — hand it a sequence string.
uxs gene — coding region (DNA + translation)
1
ATGGCCTCTGACGAAGATATCCGTAAAGTGCTGGTGACCGGCGGT
MASDEDIRKVLVTGG
46
GCAGGTTTCATCGGCTCTCACCTGGTGGACCGTCTGCTGGAAGAT
AGFIGSHLVDRLLED
91
GGCCACGAAGTGATCGTGCTGGATAACCTGAGCACCGGCAAA
GHEVIVLDNLSTGK
132 ntGC 56.8%
UDP-glucuronate decarboxylase — protein
1
MASTEDIRKVLVTGGAGFIGSHLVDRLLEDGHEVIVLDNLSTGKA
46
RNLAHLYQNPNFELIRHDVTEPILVEVDQIYHLACPASPVHYQYN
91
PIKTLKTNVLGTLNMLGLAKRVGARVLLASTSEVYG
126 aa
Click-drag across residues to select — the readout shows the range, length, and (for DNA) GC content.
Installation
npx shadcn@latest add sequence-viewer.json
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sequence | string | — | The residue string (whitespace ignored) |
| type | 'dna' \ | 'rna' \ | 'protein' |
| start | number | 1 | First position number |
| perRow | number | 50 | Residues per row |
| translate | boolean | false | Show amino-acid translation (nt only) |
| onSelect | (range \ | null) => void | — |