Guides
Display the Saudi Riyal symbol in any framework
Six self-contained walkthroughs — install in under 60 seconds, render in any stack, and ship a checkout-grade masked input on day one.
-
How to display the Saudi Riyal symbol (U+20C1) in React
Drop the official SAMA Saudi Riyal sign into any React app with riyal/react. Install once, import RiyalPrice or RiyalSymbol, render anywhere — no font setup, SSR-safe, with an optional masked input that handles SAR / / Arabic-numeral paste.
-
How to display the Saudi Riyal symbol (U+20C1) in Vue 3
First-class Vue 3 components for the official SAMA Saudi Riyal sign. Install once, render with <RiyalPrice>, edit with <RiyalInput v-model mask>, and read live SAR exchange rates with the useRiyalRate composable. SSR-safe, Nuxt-ready.
-
How to display the Saudi Riyal symbol (U+20C1) in Svelte 5
Native Svelte 5 components using runes for the official SAMA Saudi Riyal sign. RiyalPrice, RiyalInput with mask, and a rune-based useRiyalRate composable. Compiles directly with your Vite or SvelteKit bundler — no extra config.
-
How to display the Saudi Riyal symbol (U+20C1) with Tailwind CSS
A first-class Tailwind plugin that ships the SAMA Saudi Riyal glyph plus utility classes for prices, weights, and theme tokens. Works with Tailwind v3 and v4, and pairs with the bundled WOFF2 font from riyal/css.
-
How to display the Saudi Riyal symbol (U+20C1) in Next.js
Use riyal/next + riyal/react for zero-CLS embedding of the official SAMA Saudi Riyal sign in Next.js 13+ apps. Server Components, Client Components, OG image cards, and a checkout-grade masked input all in one package.
-
How to display the Saudi Riyal symbol (U+20C1) in Angular, Solid, or vanilla HTML
Web Components for the official SAMA Saudi Riyal sign work in every framework: Angular, Solid, Qwik, Astro, vanilla HTML — anywhere Custom Elements run. <riyal-symbol>, <riyal-price>, <riyal-animated-price>, and <riyal-input> are all reactive, SSR-friendly, and shadow-DOM styled.