alif-ui

v1.14.3

Published

a day ago

alif UI components pack for React

0High
0Medium
0Low

farrukhgulboev

adibaziyoeva

ui kit react alif ui react alif ui kit ui react typescript design system

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', 'aliftech' or 'universal'. Please refer to the Other Brands section if your project requires a different brand.
initialMode: This prop sets the initial theme mode for your application and can be either 'light', 'dark', or 'system'. The 'system' option will automatically adjust the theme based on the user's system preferences. If the initialMode is not provided, the application will use the system theme by default. Note: You can easily change the mode with useMode hook provided by this library
initialLocale: This prop sets the initial locale for your application and can be any valid locale string. Currently, it supports en, ru, and tj. If the initialLocale is not provided, the application will use the browser's default locale.
Note: You can easily change the locale with useLocale 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" initialLocale="ru">
			{/* 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 brand="alif" initialMode="light" initialLocale="ru">
			{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>
	);
}

Other Brands

If your project requires a different brand:

Ask your design team for the corresponding CSS folder for that brand and import it.
In your main application file import only one CSS file that matches the brand name. You can import it right after importing alif-ui/styles.css.
Set the brand prop in the AlifProvider to that brand. Make sure it matches the CSS filename you imported.

And here's where magic happens - all the components automatically adapt to that brand!

Documentation

Visit https://ui.alif.tj to view the full documentation.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme