Summit Provider

By default, the components use English labels and US English dates, so a product in English that shows US dates doesn’t need the provider.

LabelsCopy Anchor Link

A group of defaultLabels belongs to one component, except toast, which Sonner and Toast share.

Most of these strings are accessible names. Screen readers announce them, but they are never shown on screen, so a missing translation won’t appear in a visual review.

Date LocaleCopy Anchor Link

dateLocale accepts a Locale from date-fns. The Calendar passes it to React DayPicker, which reads the names of months and weekdays and the first day of the week from it. If dateLocale isn’t set, DayPicker uses US English.

If you pass locale to a Calendar, it overrides the provider for that Calendar. No other component reads dateLocale, so a date that the product formats itself isn’t affected.

InstallationCopy Anchor Link

npx shadcn@latest add @summit/summit-provider

The CLI also adds the provider with each component that reads it.

UsageCopy Anchor Link

Render the provider once, above every Summit component. It renders no element.

import { SummitProvider } from '@/components/ui/summit-provider';

<SummitProvider labels={labels}>{children}</SummitProvider>;

If the product uses React Server Components, build the props and render the provider in a file marked 'use client'. summit-provider.tsx is a client module, so a server component can’t spread defaultLabels. A locale contains functions, which can’t be passed from a server component to a client component.

Translate the LabelsCopy Anchor Link

labels replaces defaultLabels as a whole, and its type requires every key. To keep the groups that aren’t translated yet, spread defaultLabels, and then replace whole groups.

import { defaultLabels } from '@/components/ui/summit-provider';
import type { SummitLabels } from '@/components/ui/summit-provider';

const labels: SummitLabels = {
    ...defaultLabels,
    dialog: { close: 'Fermer' },
    sheet: { close: 'Fermer' },
};

Declare the object outside the component, or memoize it on the active language. If the object is built during render, it is new each time, and every component that reads the provider will render again.

Set the Date LocaleCopy Anchor Link

Import a locale from react-day-picker/locale, and pass it to dateLocale. It is a date-fns locale with the accessible names of the Calendar added, for example “Go to the Next Month”. If you import the locale from date-fns/locale, those names stay in English.

import { frCA } from 'react-day-picker/locale';

<SummitProvider dateLocale={frCA}>{children}</SummitProvider>;

Read a LabelCopy Anchor Link

useSummit returns labels and dateLocale.

import { Button } from '@/components/ui/button';
import { useSummit } from '@/components/ui/summit-provider';

function DismissButton() {
    const { labels } = useSummit();

    return <Button variant="outline">{labels.dialog.close}</Button>;
}

API ReferenceCopy Anchor Link