--- title: Provider description: A single global provider to wrap your application product: Design System type: reference summary: The global provider that wraps your application. related: - /en/docs/packages/design-system/components --- # Provider The design system package also exports a `DesignSystemProvider` component which implements a number of contextual, functional and higher order components, including those for Tooltips, Toasts, Analytics, Dark Mode and more. This provider is already added to the default apps. If you want to add a new app, make sure you add it to your root layout along with [fonts](/en/docs/packages/design-system/typography) and global CSS, like so: ```tsx title="layout.tsx" import '@kreogen/design-system/styles/globals.css'; import { fonts } from '@kreogen/design-system/lib/fonts'; import { DesignSystemProvider } from '@kreogen/design-system'; import type { ReactNode } from 'react'; type RootLayoutProperties = { readonly children: ReactNode; }; const RootLayout = ({ children }: RootLayoutProperties) => ( {children} ); export default RootLayout; ``` --- For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md) For an index of all available documentation, see [/llms.txt](/llms.txt)