arb-scroll-components

React components for rendering a scroll-styled certificate header — one version for the browser (SVG) and one for PDF generation (@react-pdf/renderer).

Install

npm install arb-scroll-components

react is a required peer dependency. @react-pdf/renderer is only required if you use the /pdf entry point.

Web components

import { ScrollFrame, Field, MetaRow, CompetencyAssessmentHeader } from 'arb-scroll-components';

ScrollFrame

A generic scroll-shaped SVG frame. You supply the banner and body content.

<ScrollFrame
  maxWidth={900}
  banner={<h1>My Certificate</h1>}
>
  <p>Body content goes here</p>
</ScrollFrame>

Props: strokeColor, fillColor, shadeColor, strokeWidth, maxWidth, banner, children, className.

Also exports two small helpers used alongside it: Field({ label }) (a labelled dotted line) and MetaRow({ left, leftValue, right, rightValue }) (two label/value pairs side by side).

CompetencyAssessmentHeader

A pre-composed header built on top of ScrollFrame, styled with Tailwind utility classes and a bundled Comfortaa display font.

<CompetencyAssessmentHeader
  bannerLabel="Competency Based Assessment"
  subtitle="འབྲུག་ཤེས་ཚད་དང་ལག་རིག་ཡོངས་འཛིན།"
  subtitleStyle={{ fontFamily: "DzongkhaFont" }}
  row1Value1="Electrician"
  row1Value2="3 hours"
  row2Value1={100}
  row2Value2={50}
/>

bannerLabel and subtitle have no defaults — pass whatever heading applies to your use case. row1Value1/row1Value2 fill the "Occupation"/"Time" line, row2Value1/row2Value2 fill the "Total Marks"/"Pass mark" line.

Every text field accepts a matching ...Style prop for inline style overrides: bannerLabelStyle, subtitleStyle, row1Value1Style, row1Value2Style, row2Value1Style, row2Value2Style. subtitleStyle={{ fontFamily: "DzongkhaFont" }} is how you render just that line in a Dzongkha font — the consuming app still needs its own CSS @font-face for "DzongkhaFont" since this package does not bundle it (only Comfortaa is bundled).

Requires Tailwind CSS in the consuming app. This component only carries Tailwind class names — it does not ship any CSS. Your tailwind.config content globs must include this package so the utility classes actually get generated, e.g.:

content: [
  './src/**/*.{js,jsx}',
  './node_modules/arb-scroll-components/dist/**/*.js',
],

The Comfortaa font is bundled internally as a data URI, so no separate asset step is needed for it.

PDF component

import { ScrollHeader } from 'arb-scroll-components/pdf';

ScrollHeader renders the same scroll layout for @react-pdf/renderer documents.

<ScrollHeader
  width={535}
  bannerLabel="Competency Based Assessment"
  dzongkhaTitle="འབྲུག་ཤེས་ཚད་དང་ལག་རིག་ཡོངས་འཛིན།"
  occupation="Electrician"
  time="3 hours"
  totalMarks={100}
  passMark={50}
/>

You must register the fonts it references before rendering: cambria, cambriab, and DzongkhaFont. ScrollHeader does not register them itself — it only references the family names, so any app rendering it must call Font.register first, e.g.:

import { Font } from '@react-pdf/renderer';

Font.register({ family: 'cambria', src: '/fonts/cambria.ttf' });
Font.register({ family: 'cambriab', src: '/fonts/cambriab-bold.ttf' });
Font.register({ family: 'DzongkhaFont', src: '/fonts/your-dzongkha-font.ttf' });

These fonts are not bundled with this package. Cambria in particular is a proprietary Microsoft font and cannot be redistributed — supply your own licensed copy (or substitute an equivalent font under a compatible license).

License

MIT