Templates and blocks

Where the files go

• Pro items under components/snow-ui-pro/, in the layout of the source: @snow-ui-pro/stat-card-grid writes components/snow-ui-pro/blocks/StatCardGrid/StatCardGrid.tsx.
• The snow-ui components they use under components/snow-ui/; the Pro files import those copies, not an npm package.
• Each Pro file starts with a short licence header. Keep it; change everything else as you like.

Blocks

A block is one part of a page — a page header, a grid of metrics, a table with bulk actions, a form. Blocks take plain data as props, never fetch, and never import mock data, so you pass in your own:

import { StatCardGrid } from '@/components/snow-ui-pro/blocks/StatCardGrid/StatCardGrid'

export function WeekSummary({ activeUsers }: { activeUsers: string }) {
  return (
    <StatCardGrid
      title="This week"
      stats={[
        { label: 'Active users', value: activeUsers, change: '+4.2%', trend: 'up', period: 'vs last week' },
        { label: 'Open tickets', value: '214' },
      ]}
    />
  )
}

Every block has a live preview with mock data on this site (see block previews), and its props are documented in its source.

Templates

A template is a set of page components composed from blocks, in the app shell its job needs (a focus layout for sign-in, a grouped sidebar for the commerce admin). You mount each page from your own route file, so your URLs and layouts stay yours.

A template never calls the network itself: its pages go through an adapter, a small interface you implement with calls to your backend (for Auth & onboarding, an AuthAdapter passed to its provider). A mock adapter with realistic, deterministic data and every error state is a separate item (@snow-ui-pro/mock-auth, mock-settings, mock-commerce, mock-crm), to try the pages before you wire up yours. The live previews on this site run on them. The template guides show how to mount each template.

Theme, dark mode and contrast

Pro uses only snow-ui’s tokens, so it follows your snow-ui theme: dark mode with data-theme="dark" (or the dark class) on <html>, or the operating system’s setting, and the high-contrast variant with data-contrast="more".

Text and right-to-left

Built-in text has English defaults and can be replaced through props, so you can translate without editing the source. For right-to-left languages, set the direction on <html> and on snow-ui’s provider (its locale is a date-fns locale, for calendars); layouts mirror through logical CSS properties:

import { arSA } from 'date-fns/locale'
import { SnowUIProvider } from '@/components/snow-ui/components/SnowUIProvider/SnowUIProvider'

// In the root layout, under <html lang="ar" dir="rtl">:
<SnowUIProvider dir="rtl" locale={arSA}>
  {children}
</SnowUIProvider>

The charts of the Commerce and CRM templates come from the @holakirr/snow-ui-charts npm package, which reads the direction and locale from the npm package’s own provider: for right-to-left charts, also wrap the pages in SnowUIProvider imported from @holakirr/snow-ui.