Gathering detailed insights and metrics for alif-ui
Gathering detailed insights and metrics for alif-ui
Installations
npm install alif-uiDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
20.19.3
NPM Version
10.8.2
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
2
Package Meta Information
Latest Version
1.9.2-alpha.0
Package Id
alif-ui@1.9.2-alpha.0
Unpacked Size
2.50 MB
Size
717.72 kB
File Count
1,447
NPM Version
10.8.2
Node Version
20.19.3
Published on
Jul 18, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
49
@chromatic-com/storybook@storybook/addon-essentials@storybook/addon-interactions@storybook/addon-links@storybook/addon-onboarding@storybook/blocks@storybook/react@storybook/react-vite@storybook/test@testing-library/jest-dom@testing-library/react@types/css-modules@types/jest@types/node@types/react@types/react-dom@typescript-eslint/eslint-plugin@typescript-eslint/parser@vitejs/plugin-reacteslinteslint-config-prettiereslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-prettiereslint-plugin-react-hookseslint-plugin-storybookeslint-plugin-unused-importshuskyidentity-obj-proxyjestjest-environment-jsdomlint-stagedprettierreactreact-domreact-router-domsassstorybookstyle-dictionarystylelintstylelint-config-standardts-jesttypescriptvitevite-plugin-dtsvite-plugin-libcssvite-plugin-lintervite-plugin-static-copyvite-tsconfig-paths
alif UI is a React component library that implements Alif's Design System for your React and Next Applications
Installation
1npm install alif-ui
1yarn 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'. If theinitialModeis not provided, the application will use the browser's default theme. Note: You can easily change the mode withuseModehook provided by this libraryinitialLocale: This prop sets the initial locale for your application and can be any valid locale string. Currently, it supportsen,ru, andtj. If theinitialLocaleis not provided, the application will use the browser's default locale.- Note: You can easily change the locale with
useLocalehook 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.
1import { AlifProvider } from 'alif-ui'; 2import 'alif-ui/styles.css'; 3 4function App() { 5 return ( 6 <AlifProvider brand="alif" initialMode="light" initialLocale="ru"> 7 {/* Your application components */} 8 </AlifProvider> 9 ); 10} 11 12export 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
1'use client'; 2 3import { ReactNode } from 'react'; 4import { AlifProvider } from 'alif-ui'; 5import 'alif-ui/styles.css'; 6 7interface ClientProviderWrapperProps { 8 children: ReactNode; 9} 10 11const ClientProviderWrapper = ({ children }: ClientProviderWrapperProps) => { 12 return ( 13 <AlifProvider brand="alif" initialMode="light" initialLocale="ru"> 14 {children} 15 </AlifProvider> 16 ); 17}; 18 19export default ClientProviderWrapper;
Using the App Router
2. Update the Root Layout File: app/layout.tsx
1import { ReactNode } from 'react'; 2import ClientProviderWrapper from '../components/ClientProviderWrapper'; 3 4interface RootLayoutProps { 5 children: ReactNode; 6} 7 8const RootLayout = ({ children }: RootLayoutProps) => { 9 return ( 10 <html lang="en"> 11 <body> 12 <ClientProviderWrapper>{children}</ClientProviderWrapper> 13 </body> 14 </html> 15 ); 16}; 17 18export default RootLayout;
Using the Pages Router
2. Update the App Component file: pages/_app.tsx
1import type { AppProps } from 'next/app'; 2import ClientProviderWrapper from '../components/ClientProviderWrapper'; 3 4export default function App({ Component, pageProps }: AppProps) { 5 return ( 6 <ClientProviderWrapper> 7 <Component {...pageProps} /> 8 </ClientProviderWrapper> 9 ); 10}
Documentation
Visit https://ui.alif.tj to view the full documentation.
No vulnerabilities found.
No security vulnerabilities found.