Alocite Provider

Functionality

Provider need to be used to wrap your app.

It will provide the theme control to your app.
It provide the toaster for your app.
It provide the tooltip for your app.

app/layout.tsx

import { AlociteProvider } from '@alocite/ui'
 
export default function RootLayout({ children }: { children: React.ReactNode }): JSX.Element {
  return (
    <html lang="en">
      <body>
        <AlociteProvider>{children}</AlociteProvider>
      </body>
    </html>
  )
}

Props

Prop	Type	Description	Default
`children`	`React.ReactNode`	The child components to be rendered within the provider.
`forcedTheme`	`string`	The theme to be enforced regardless of system settings.
`defaultTheme`	`string`	The initial theme before user selection or system preference.
`enableSystem`	`boolean`	Enables the use of the system's theme settings.	`true`
`toastPosition`	`'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	The position of the toast notifications.	`'bottom-right'`
`toastExpand`	`boolean`	Determines if toast notifications are expandable.	`false`
`toastRichColors`	`boolean`	Enables rich color schemes in toast notifications.	`true`

Introduction

Themes