@acezentrix/vinext-a11y
v0.1.12
Published
Accessibility plugin for ViNext apps — theme, font, text size, zoom
Maintainers
sarizReadme
@acezentrix/vinext-a11y
Accessibility plugin for ViNext + DaisyUI apps.
Features: Theme switching, Font selection, Text size control, Page zoom.
Install
# Local (development)
bun add file:../packages/vinext-a11y
# npm (after publishing)
bun add @acezentrix/vinext-a11yUsage
1. Create config
// lib/a11y-config.ts
import type { AccessibilityConfig } from "@acezentrix/vinext-a11y";
export const a11yConfig: AccessibilityConfig = {
prefix: "myapp_",
storage: "cookie", // "cookie" for SSR | "localStorage" for client-only
defaultTheme: "light",
defaultFont: "inter",
defaultTextSize: "md",
defaultZoom: "100",
themes: [
{ label: "Light", key: "light" },
{ label: "Dark", key: "dark" },
],
fonts: [
{ label: "Inter", key: "inter", value: "'Inter', sans-serif" },
{ label: "Sarabun", key: "sarabun", value: "'Sarabun', sans-serif" },
],
textSizes: [
{ label: "S", key: "sm", value: "14px" },
{ label: "M", key: "md", value: "16px" },
{ label: "L", key: "lg", value: "18px" },
{ label: "XL", key: "xl", value: "20px" },
],
zoomLevels: [
{ label: "90%", key: "90", value: 0.9 },
{ label: "100%", key: "100", value: 1.0 },
{ label: "110%", key: "110", value: 1.1 },
{ label: "125%", key: "125", value: 1.25 },
],
};2. Add to layout
// app/layout.tsx or app/admin/layout.tsx
import { AccessibilityPlugin } from "@acezentrix/vinext-a11y";
import { a11yConfig } from "@/lib/a11y-config";
export default function Layout({ children }) {
return (
<div>
{children}
<AccessibilityPlugin config={a11yConfig} />
</div>
);
}3. Tailwind — scan the package
/* globals.css */
@import "tailwindcss";
@plugin "daisyui";
@source "../node_modules/@acezentrix/vinext-a11y/dist";4. SSR (cookie storage only)
// app/layout.tsx (server component)
import { cookies } from "next/headers";
import { a11yConfig } from "@/lib/a11y-config";
export default async function RootLayout({ children }) {
const c = await cookies();
const p = a11yConfig.prefix;
const theme = c.get(`${p}theme`)?.value ?? a11yConfig.defaultTheme;
const font = a11yConfig.fonts.find(f => f.key === (c.get(`${p}font`)?.value ?? a11yConfig.defaultFont));
const size = a11yConfig.textSizes.find(t => t.key === (c.get(`${p}text_size`)?.value ?? a11yConfig.defaultTextSize));
const zoom = a11yConfig.zoomLevels.find(z => z.key === (c.get(`${p}zoom`)?.value ?? a11yConfig.defaultZoom));
return (
<html data-theme={theme} style={{ fontSize: size?.value, fontFamily: font?.value, zoom: zoom?.value }}>
...
</html>
);
}5. SSR (localStorage — inline script)
<script dangerouslySetInnerHTML={{ __html: `(function(){
var p = "myapp_";
var t = localStorage.getItem(p+"theme");
if (t) document.documentElement.setAttribute("data-theme", t);
var fs = localStorage.getItem(p+"text_size");
if (fs) document.documentElement.style.fontSize = fs;
var ff = localStorage.getItem(p+"font");
if (ff) document.documentElement.style.fontFamily = ff;
var z = localStorage.getItem(p+"zoom");
if (z) document.documentElement.style.zoom = z;
})();`}} />Custom sections
Add project-specific sections via children:
<AccessibilityPlugin config={a11yConfig}>
<LanguageSwitcher />
<LogoutLink />
</AccessibilityPlugin>Advanced — use individual sections or hook
import { useAccessibility, ThemeSection, FontSection } from "@acezentrix/vinext-a11y";
function MyCustomPanel({ config }) {
const a11y = useAccessibility(config);
return (
<div>
<ThemeSection themes={config.themes} current={a11y.state.theme} onChange={a11y.setTheme} />
<FontSection fonts={config.fonts} current={a11y.state.font} onChange={a11y.setFont} />
</div>
);
}Peer Dependencies
react>= 19.0.0react-dom>= 19.0.0lucide-react>= 0.400.0- DaisyUI + Tailwind (class names only, no dependency needed)
Build
bun run build # one-shot build
bun run dev # watch modeLicense
MIT