` component uses Astro's Prism integration which only runs during the build process, not at runtime
+2. **Proper syntax highlighting** - Pre-rendering ensures all code has proper syntax highlighting applied via Prism
+3. **Performance** - No runtime file reading or syntax highlighting processing; instant switching between code samples
+4. **Simplicity** - Avoids complex API endpoints or client-side file fetching
+
+**Accessibility considerations:**
+
+Inactive code samples are hidden from both visual users and assistive technology:
+
+- `display: none` hides them visually
+- `aria-hidden="true"` ensures screen readers ignore hidden code blocks
+- Only the active code sample has `aria-hidden="false"`, making it visible to screen readers
+
+When the active accordion changes, the visibility and `aria-hidden` attributes are updated via JavaScript to show the new code sample and hide all others.
diff --git a/src/components/TryItOut/TryItOut.astro b/src/components/TryItOut/TryItOut.astro
new file mode 100644
index 00000000000..c015f66c5bf
--- /dev/null
+++ b/src/components/TryItOut/TryItOut.astro
@@ -0,0 +1,106 @@
+---
+import { buttonVariants, Typography } from "@chainlink/blocks"
+import styles from "./styles.module.css"
+import CodeSample from "../CodeSample/CodeSample.astro"
+import { TryItOutAccordion } from "./TryItOutAccordion"
+import { clsx } from "~/lib/clsx/clsx"
+
+interface CTA {
+ text: string
+ href: string
+ variant?: "primary" | "secondary"
+}
+
+interface Props {
+ accordionTabs: Array<{ title: string; text: string; codeSampleSrc: string }>
+ ctas: CTA[]
+}
+
+const { accordionTabs, ctas } = Astro.props
+---
+
+
+
+ Try it out
+
+
+
+
+
+
+
+
+
+ {
+ accordionTabs.map((tab, index) => (
+
+
+
+ ))
+ }
+
+
+
+
+
+
+
+
+
+
diff --git a/src/stores/tryItOutStore.ts b/src/stores/tryItOutStore.ts
new file mode 100644
index 00000000000..fe13f6662e9
--- /dev/null
+++ b/src/stores/tryItOutStore.ts
@@ -0,0 +1,3 @@
+import { atom } from "nanostores"
+
+export const activeAccordionIndex = atom(0)