alif-ui-test
v1.0.56
Published
alif UI components pack for React
Downloads
1,311
Maintainers
adibaziyoevaReadme
Installation
npm install alif-uiyarn add alif-uiUsage
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 withuseModehook 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;Documentation
Visit https://ui.alif.tj to view the full documentation.