zeti-frontend
v0.2.1
Published
Multi-tenant frontend library with dynamic theming, feature flags, and styling utilities
Maintainers
bhame2013Readme
zeti-frontend
Multi-tenant frontend library for Next.js with dynamic theming, feature flags, and styling utilities.
Features
- 🎨 Dynamic Theming: Multi-tenant theme configuration with runtime style injection
- 🚩 Feature Flags: Module and variant-based feature management
- 🔤 Font Management: Pre-configured Google Fonts with next/font optimization
- 💅 Styling: Vanilla Extract integration with type-safe CSS
- 📦 Server Components: Full Next.js App Router support
Installation
npm install zeti-frontend
# or
pnpm add zeti-frontend
# or
yarn add zeti-frontendPeer Dependencies
{
"@vanilla-extract/css": ">=1.18.0",
"@vanilla-extract/dynamic": ">=2.1.0",
"next": ">=15.0.0",
"react": ">=19.0.0",
"react-dom": ">=19.0.0"
}Usage
Basic Setup
// app/layout.tsx
import { fetchTenantConfig } from 'zeti-frontend/tenant';
import { baseClass } from 'zeti-frontend/styles';
import { StyleInjector } from 'zeti-frontend/server';
import { FontProvider } from 'zeti-frontend/fonts';
export default async function RootLayout({ children }) {
const config = await fetchTenantConfig();
const bodyFont = config.theme.typography.body.fontFamily;
return (
<html lang="en">
<body className={baseClass}>
<FontProvider fonts={[bodyFont]}>
<StyleInjector theme={config.theme} scope="app">
{children}
</StyleInjector>
</FontProvider>
</body>
</html>
);
}Available Fonts
The library includes pre-optimized Google Fonts:
- inter, roboto, openSans, poppins, montserrat, lato
- playfair, sourceCodePro, nunito, raleway, ubuntu
- workSans, dmSans
Tenant Configuration
Create a tenant-config.json file:
{
"config": {
"activeProducts": ["main"]
},
"theme": {
"color": {
"primary": "#3f5efb",
"secondary": "#fc466b"
},
"typography": {
"body": {
"fontFamily": "inter",
"fontSize": "16px"
}
}
},
"products": {}
}Exports
zeti-frontend/styles- Styling utilities and base classeszeti-frontend/server- Server-side components (StyleInjector)zeti-frontend/fonts- Font provider componentzeti-frontend/tenant- Tenant configuration utilitieszeti-frontend/feature-flag- Feature flag componentszeti-frontend/schemas- Zod schemas for validation
License
MIT