diff --git a/src/components/logo/RNALogo.tsx b/src/components/logo/RNALogo.tsx
new file mode 100644
index 0000000..aa5d999
--- /dev/null
+++ b/src/components/logo/RNALogo.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+import { A, C, G, U } from "../glyphs";
+import { Logo, LogoProps } from "./Logo";
+import { UserDefinedAlphabet } from "../../types";
+
+/**
+ * Represents the RNA alphabet, with the four nucleotides colored
+ * in a similar scheme to the MEME default.
+ */
+export const RNAAlphabet = [
+  { component: A, regex: "A", color: "red" },
+  { component: C, regex: "C", color: "blue" },
+  { component: G, regex: "G", color: "orange" },
+  { component: U, regex: "U", color: "seagreen" },
+];
+
+export type RNALogoProps = Omit<LogoProps, "alphabet"> & {
+  /** The DNA alphabet to use for the logo. */
+  alphabet?: UserDefinedAlphabet;
+};
+
+/**
+ * Renders a logo with the RNA alphabet, with nucleotides colored similarly to the MEME default.
+ */
+export const RNALogo = (props: RNALogoProps) => (
+  <Logo alphabet={RNAAlphabet} {...props} />
+);
diff --git a/src/components/logo/rnalogo.jsx b/src/components/logo/rnalogo.jsx
deleted file mode 100644
index 0c15176..0000000
--- a/src/components/logo/rnalogo.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-
-import { A, C, G, U } from "../glyphs";
-import Logo from "./Logo";
-
-/**
- * Represents the RNA alphabet, with the four nucleotides colored
- * in a similar scheme to the MEME default.
- */
-export const RNAAlphabet = [
-  { component: A, regex: "A", color: "red" },
-  { component: C, regex: "C", color: "blue" },
-  { component: G, regex: "G", color: "orange" },
-  { component: U, regex: "U", color: "seagreen" },
-];
-
-/**
- * Renders a logo with the RNA alphabet, with nucleotides colored similarly to the MEME default.
- *
- * @prop ppm position probability matrix. Rows are positions and should sum to 1.0; columns are nucleotides,
- *           alphabetically. If this is provided, it takes precedence over PFM in computing symbol heights.
- * @prop pfm position frequency matrix. Rows are positions and columns are nucleotides, alphabetically.
- * @prop mode the mode to use when computing letter heights; either information content or frequency.
- * @prop startpos number to assign the first position in the logo; defaults to 1.
- * @prop yAxisMax if set, uses an explicit maximum value for the y-axis rather than the total number of bits possible. This is ignored in FREQUENCY mode.
- */
-const RNALogo = React.forwardRef((props, ref) => (
-  <Logo alphabet={RNAAlphabet} {...props} ref={ref} />
-));
-export default RNALogo;
diff --git a/src/index.js b/src/index.js
index 86cf3d4..da94bd6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,8 @@
 import { Logo } from "./components/logo/Logo";
 import { RawLogo } from "./components/logo/RawLogo";
-import ProteinLogo, { ProteinAlphabet } from "./components/logo/ProteinLogo";
-import DNALogo, { DNAAlphabet } from "./components/logo/DNALogo";
-import RNALogo, { RNAAlphabet } from "./components/logo/rnalogo";
+import { ProteinLogo, ProteinAlphabet } from "./components/logo/ProteinLogo";
+import { DNALogo, DNAAlphabet } from "./components/logo/DNALogo";
+import { RNALogo, RNAAlphabet } from "./components/logo/RNALogo";
 import CompleteLogo from "./components/logo/completelogo";
 import { CompleteAlphabet } from "./common/alphabet";
 import { xrange } from "./common/utils";
diff --git a/src/js/embed.jsx b/src/js/embed.jsx
index 710fba5..864c6b3 100644
--- a/src/js/embed.jsx
+++ b/src/js/embed.jsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 
-import DNALogo from "../components/logo/DNALogo";
-import RNALogo from "../components/logo/rnalogo";
-import ProteinLogo from "../components/logo/ProteinLogo";
+import { DNALogo } from "../components/logo/DNALogo";
+import { RNALogo } from "../components/logo/RNALogo";
+import { ProteinLogo } from "../components/logo/ProteinLogo";
 import { Logo } from "../components/logo/Logo";
 import { RawLogo } from "../components/logo/RawLogo";
 
@@ -56,4 +56,3 @@ export const embedLogo = (div, props) => {
 export const embedRawLogo = (container, props) => {
   container.innerHTML = renderToStaticMarkup(<RawLogo {...props} />);
 };
-
diff --git a/src/stories/RNALogo.stories.tsx b/src/stories/RNALogo.stories.tsx
new file mode 100644
index 0000000..e9d0050
--- /dev/null
+++ b/src/stories/RNALogo.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { RNALogo } from "../components/logo/RNALogo";
+import { DataType } from "../types";
+
+const meta = {
+  title: "RNALogo",
+  component: RNALogo,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+} satisfies Meta<typeof RNALogo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    data: [
+      [0.7, 0.1, 0.1, 0.1],
+      [0, 1, 0, 0],
+      [0, 0, 0, 1],
+      [1, 0, 0, 0],
+      [1, 0, 0, 0],
+      [0, 1, 0, 0],
+      [0.3, 0.2, 0.3, 0.2],
+    ],
+    dataType: DataType.PPM,
+    width: 700,
+  },
+};