Alif-ui NPM | npm.io

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';
import 'alif-ui/styles.css';

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

export default App;

For a Next.js Application

To integrate AlifProvider into a Next.js application 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';
import 'alif-ui/styles.css';

interface ClientProviderWrapperProps {
	children: ReactNode;
}

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

export default ClientProviderWrapper;

Using the App Router

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

import { ReactNode } from 'react';
import ClientProviderWrapper from '../components/ClientProviderWrapper';

interface RootLayoutProps {
	children: ReactNode;
}

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

export default RootLayout;

Using the Pages Router

2. Update the App Component file: pages/_app.tsx

import type { AppProps } from 'next/app';
import ClientProviderWrapper from '../components/ClientProviderWrapper';

export default function App({ Component, pageProps }: AppProps) {
	return (
		<ClientProviderWrapper>
			<Component {...pageProps} />
		</ClientProviderWrapper>
	);
}