alif-ui

v2.0.0-beta.2

Published

4 days ago

alif UI components pack for React

Downloads

1,719

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. The brand is responsible for styles that are specific to your project. The default is set to 'universal'. Please refer to the Brands section if your project requires a brand. Mostly likely it will be required, we encourage you to set this prop correctly if you want to follow the Design System.
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 'styles/alif/alif.css'; // Adjust the path as necessary
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 'styles/alif/alif.css'; // Adjust the path as necessary
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>
	);
}

Brands

If your project requires a brand:

Ask your design team for the corresponding CSS folder for that brand and import it into your project.
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