Pinna | Mobile-First Multipurpose HTML Template

Live demo (English)  ·  Live demo (Arabic, RTL)  ·  Documentation

The component library is the product. Fifteen ui-* pages with 84 live examples, each sitting above a Code panel holding the exact markup of the example, with a Copy button. Native elements first: <details name> accordions, <dialog> sheets, popover menus, scroll-snap rails, a CSS-only pricing toggle and segmented control. No jQuery, no CDN, no icon font.

A site and a shop that prove it composes. Home, about, services and contact; a blog with article, gallery and video posts (reading progress, table of contents, comments sheet); a shop grid with filter and sort sheets, a product page with snap gallery, variant chips, size guide and sticky add-to-cart bar; cart with coupons, delivery estimate and free-shipping progress; single-page checkout with real autocomplete and inputmode fields; order confirmation, wishlist, instant search, an account area with address book and order timeline; 404, offline, coming soon and privacy.

Dark mode and RTL are not add-ons. Every colour is a light/dark token pair checked for WCAG AA contrast, and the Arabic build is the same code — the layout is mirrored by the browser through CSS logical properties, with no separate right-to-left stylesheet to maintain. Both directions ship with real Arabic copy, not machine-translated placeholder.

You do not need the build to use the template. The download contains finished, self-contained sites in template/ltr and template/rtl — plain HTML, CSS and JavaScript, no build step, no dependencies. Double-click any page to preview it, or upload one folder as your site root. The Vite + Tailwind CSS 4 + Handlebars source project is included as well, for anyone who wants it.

Measured performance. Lighthouse across twelve pages in both languages:

• Desktop: 100 / 100 / 100 / 100 — performance, accessibility, best practices and SEO, on every page tested.
• Mobile: 97–99 performance, with 100 accessibility, best practices and SEO on every page.

Zero runtime dependencies, a Lucide SVG sprite, self-hosted fonts, AVIF/WebP/JPEG at three sizes, a 19 KB stylesheet and 20 KB of JavaScript gzipped.

Already own version 1? The 2.x download still contains your original 1.x AMP files, unchanged, in a legacy/ folder. Version 2 is a complete rewrite and shares no code with 1.x, so the two cannot be merged — nothing is taken away from you, and your licence still covers the old files.