Alif-ui-test NPM

Installation

npm install alif-ui

yarn add alif-ui

Usage

brand: This prop sets the brand for your application and should be one of the following options: 'alif', 'alifshop', or 'aliftech'.
initialMode: This prop sets the initial theme mode for your application and can be either 'light' or 'dark'. Note: You can easily change the mode with useMode hook provided by this library

To use the alif-ui components in your project, follow these steps:

For a Standard React Application

Wrap your application with the AlifProvider.

import { AlifProvider } from 'alif-ui';

function App() {
	return (
		<AlifProvider brand="alif" initialMode="light">
			{/* Your application components */}
		</AlifProvider>
	);
}

export default App;

For a Next.js Application

Using the App Router

To integrate AlifProvider into a Next.js application using the App Router, follow these steps:

1. Create a Client-Side Wrapper Component File: components/ClientProviderWrapper.tsx

'use client';

import { ReactNode } from 'react';
import { AlifProvider } from 'alif-ui'; // Adjust the import path accordingly

interface ClientProviderWrapperProps {
	children: ReactNode;
}

const ClientProviderWrapper = ({ children }: ClientProviderWrapperProps) => {
	return (
		<AlifProvider initialMode="light" brand="alif">
			{children}
		</AlifProvider>
	);
};

export default ClientProviderWrapper;

2. Update the Root Layout File: app/layout.tsx

import { ReactNode } from 'react';
import ClientProviderWrapper from '../components/ClientProviderWrapper'; // Adjust the import path accordingly

interface RootLayoutProps {
	children: ReactNode;
}

const RootLayout = ({ children }: RootLayoutProps) => {
	return (
		<html lang="en">
			<body>
				<ClientProviderWrapper>{children}</ClientProviderWrapper>
			</body>
		</html>
	);
};

export default RootLayout;