@shopkit/app-shell
Advanced tools
App shell components for Shopkit storefronts. Provides master wrapper, analytics, toast notifications, head scripts, and navigation progress indicator.
bun add @shopkit/app-shell
{
"react": "^18.0.0",
"react-dom": "^18.0.0",
"next": ">=14.0.0",
"next-intl": ">=4.0.0",
"@shopkit/core": "^0.1.0",
"@shopkit/asset-cache": "^1.0.0"
}
// layout.tsx
import { AppShell, AppHead, AppAnalytics } from "@shopkit/app-shell";
export default async function RootLayout({ children }) {
const theme = await getTheme();
const messages = await getMessages();
return (
<html>
<head>
<AppHead />
</head>
<body>
<AppShell config={{ merchantName: "my-store", locale: "en", messages, theme }}>
{children}
</AppShell>
<AppAnalytics />
</body>
</html>
);
}
Master provider wrapper that combines all required providers into a single component.
import { AppShell } from "@shopkit/app-shell";
<AppShell
config={{
merchantName: "my-store",
locale: "en",
messages: { /* i18n messages */ },
theme: { /* theme object */ },
}}
>
{children}
</AppShell>
Props:
| Prop | Type | Required | Description |
|---|---|---|---|
config.merchantName | string | Yes | Merchant identifier |
config.locale | string | Yes | Current locale (e.g., "en", "hi") |
config.messages | Record<string, unknown> | Yes | i18n messages |
config.theme | Theme | null | Yes | Theme from @shopkit/core |
config.analytics | AnalyticsConfig | No | Analytics configuration |
config.fonts | FontConfig | No | Font configuration |
config.experiments | ExperimentConfig | No | A/B testing config |
Includes:
AppRouteLoader - Navigation progress barNextIntlClientProvider - i18n providerThemeProvider - Theme managementAppToast + AppToastContainer - Toast notificationsAuthProvider - Authentication contextAssetCacheInitializer - Asset cachingAppAnalyticsInit - Analytics initializationHead scripts and resource hints for optimal performance.
import { AppHead } from "@shopkit/app-shell";
<head>
<AppHead
config={{
abTesting: {
prtConfigUrl: "https://...",
prtAbUrl: "https://...",
},
prefetch: {
dnsPrefetch: ["https://cdn.example.com"],
preloadScripts: ["https://example.com/script.js"],
},
}}
/>
</head>
Props:
| Prop | Type | Description |
|---|---|---|
config.abTesting.prtConfigUrl | string | A/B testing config URL |
config.abTesting.prtAbUrl | string | A/B testing script URL |
config.prefetch.dnsPrefetch | string[] | Domains to DNS prefetch |
config.prefetch.preloadScripts | string[] | Scripts to preload |
config.clarity.projectId | string | Microsoft Clarity ID |
Environment Variables:
NEXT_PUBLIC_PRT_CONFIG_URLNEXT_PUBLIC_PRT_AB_URLNEXT_PUBLIC_CLARITY_IDBody analytics scripts for GA, PostHog, and Facebook Pixel.
import { AppAnalytics } from "@shopkit/app-shell";
<body>
{/* ... content ... */}
<AppAnalytics
config={{
googleAnalytics: { measurementId: "G-XXXXX" },
posthog: { apiKey: "phc_XXXXX", apiHost: "https://..." },
facebookPixel: { pixelId: "XXXXX" },
}}
/>
</body>
Environment Variables (used as defaults):
NEXT_PUBLIC_GA_ID - Google Analytics measurement IDNEXT_PUBLIC_GOOGLE_ADS_ID - Google Ads conversion IDNEXT_PUBLIC_POSTHOG_KEY - PostHog API keyNEXT_PUBLIC_POSTHOG_HOST - PostHog API hostNEXT_PUBLIC_PIXEL_ID - Facebook Pixel IDProduct detail page (PDP) view tracking with engagement metrics.
import { AppProductTracker } from "@shopkit/app-shell";
<AppProductTracker
productData={{
id: "variant-123",
title: "Amazing Product",
price: 999.99,
currency: "INR",
category: "Electronics",
brand: "MyBrand",
}}
dwellTimeSeconds={20}
disableDwellTracking={false}
/>
Props:
| Prop | Type | Default | Description |
|---|---|---|---|
productData.id | string | Required | Product/variant ID |
productData.title | string | Required | Product title |
productData.price | number | Required | Product price |
productData.currency | string | "INR" | Currency code |
productData.category | string | - | Product category |
productData.brand | string | - | Brand name |
dwellTimeSeconds | number | 20 | Seconds before firing engagement event |
disableDwellTracking | boolean | false | Disable dwell tracking |
Events Fired:
view_item - Immediately on mountviewed_product - After dwell time (engagement signal)import { AppToast, AppToastContainer } from "@shopkit/app-shell";
<AppToast>
{children}
<AppToastContainer />
</AppToast>
import { useToast } from "@shopkit/app-shell";
function MyComponent() {
const { addToast, removeToast, clearToasts, toasts } = useToast();
const showSuccess = () => {
addToast({
type: "success",
title: "Success!",
message: "Item added to cart",
duration: 3000, // optional, defaults to 3000ms
});
};
return <button onClick={showSuccess}>Add to Cart</button>;
}
Toast Types:
success - Green success messageerror - Red error messagewarning - Amber warning messageinfo - Blue info messageToast Containers:
AppToastContainer - Bottom-right, minimal styleAppToastContainerV1 - Top-right, with iconsNavigation progress indicator that shows during page transitions.
import { AppRouteLoader } from "@shopkit/app-shell";
// Usually included in AppShell, but can be used standalone
<AppRouteLoader />
Features:
import type {
// AppShell
AppShellConfig,
AppShellProps,
AnalyticsConfig,
FontConfig,
ExperimentConfig,
// AppHead
AppHeadConfig,
AppHeadProps,
ABTestingConfig,
PrefetchConfig,
ClarityConfig,
// AppAnalytics
AppAnalyticsConfig,
AppAnalyticsProps,
GoogleAnalyticsConfig,
PostHogConfig,
FacebookPixelConfig,
TrackingContext,
AppAnalyticsInitConfig,
AppAnalyticsInitProps,
TrackedProductData,
AppProductTrackerProps,
// AppToast
Toast,
ToastContextType,
AppToastProps,
} from "@shopkit/app-shell";
# Google Analytics
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
NEXT_PUBLIC_GOOGLE_ADS_ID=AW-XXXXXXXXXX
# Facebook Pixel
NEXT_PUBLIC_PIXEL_ID=XXXXXXXXXX
# PostHog
NEXT_PUBLIC_POSTHOG_KEY=phc_XXXXXXXXXX
NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com
# A/B Testing
NEXT_PUBLIC_PRT_CONFIG_URL=https://...
NEXT_PUBLIC_PRT_AB_URL=https://...
# Microsoft Clarity
NEXT_PUBLIC_CLARITY_ID=XXXXXXXXXX
# Shopify Analytics
NEXT_PUBLIC_SHOPIFY_SHOP_ID=XXXXX
NEXT_PUBLIC_SHOPIFY_STORE_ANALYTIC_DOMAIN=example.myshopify.com
bun run test # Run tests
bun run test:watch # Watch mode
bun run test:coverage # With coverage
bun run dev # Watch mode for development
bun run build # Build the package
bun run typecheck # Type check
bun run clean # Clean dist folder
MIT
FAQs
App shell components for Shopkit storefronts
We found that @shopkit/app-shell demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.