Utilities components
7 Utilities components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Barcode, Countdown, Hooks, Icon, QrCode, Linkify, Translations.
- BarcodeOne-dimensional barcodes drawn as SVG with jsbarcode (Code 128, EAN-13, EAN-8, UPC-A, Code 39, ITF, Codabar, Pharmacode), with input validation that explains the problem, SVG and PNG download and a generator card.
- CountdownA drift-free countdown hook, a timer ring with phase colours, the mm:ss readout, cycle dots, and an idle-time prompt for time that passed while you were away.
- HooksSmall client hooks used across apps; useDebounce and useDebouncedCallback for search and autosave, useMediaQuery and useIsMobile for responsive logic, and useInfiniteScroll for loading the next page near the end of a list.
- Iconlucide icon wrapper that mirrors direction-bearing glyphs in RTL, plus the bidi helpers Ltr, Bdi, BidiText and isolate.
- QrCodeQR code drawn as SVG in the browser with dot, rounded or square modules, three eye styles, a centre logo slot, token or prop colours and SVG or PNG download, plus a full generator card.
- LinkifySmall text helpers for user content. Linkify safe links, bidi-isolated UserText, a translation toggle, scroll fades, an optimistic save button and progressive reveal.
- TranslationsApp strings for the Nasaq locale: TranslationsProvider and useT() give t(key, vars) over your dictionaries, with nested and namespaced keys, interpolation, CLDR plurals, locale fallback, a remembered choice and seedLocale for server defaults.
Text effects
Small motion effects for words on marketing and product pages, a flipping phrase, a shimmer, a marquee, a word by word reveal and handwritten notes and marks. All of them hold still under reduced motion and never split Arabic into letters.
Barcode
One-dimensional barcodes drawn as SVG with jsbarcode (Code 128, EAN-13, EAN-8, UPC-A, Code 39, ITF, Codabar, Pharmacode), with input validation that explains the problem, SVG and PNG download and a generator card.