diff --git a/src/components/Ruby.astro b/src/components/Ruby.astro
new file mode 100644
index 0000000..8f41ad5
--- /dev/null
+++ b/src/components/Ruby.astro
@@ -0,0 +1,14 @@
+---
+export interface Props {
+	base: string;
+	text: string;
+	class?: string;
+	[key: string]: any;
+}
+
+const { base, text, class: className, ...props } = Astro.props;
+---
+
+<ruby class:list={className} {...props}
+	>{base}<rp>（</rp><rt class="relative -block-start-[0.3em]">{text}</rt><rp>）</rp>
+</ruby>
diff --git a/src/mdx-components.ts b/src/mdx-components.ts
index 1cf7c71..76dd195 100644
--- a/src/mdx-components.ts
+++ b/src/mdx-components.ts
@@ -27,6 +27,7 @@ import PrimeVideoFlag from './components/PrimeVideoFlag.astro';
 import ProductLink from './components/ProductLink.astro';
 import ProjectIntro from './components/ProjectIntro.astro';
 import Pullquote from './components/Pullquote.astro';
+import Ruby from './components/Ruby.astro';
 import Spotify from './components/Spotify.astro';
 import Subheadline from './components/Subheadline.astro';
 import Subsubheadline from './components/Subsubheadline.astro';
@@ -73,6 +74,7 @@ export const mapping = {
 	PrimeVideoFlag,
 	ProjectIntro,
 	Pullquote,
+	Ruby,
 	Spotify,
 	ThemeBox,
 	ul: UnorderedList,
@@ -104,6 +106,7 @@ export const rssMapping = {
 	ProductLink,
 	ProjectIntro,
 	Pullquote,
+	Ruby,
 	Spotify,
 	ThemeBox,
 	Verse,