Gathering detailed insights and metrics for alif-ui-test
Gathering detailed insights and metrics for alif-ui-test
Installations
npm install alif-ui-testDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
1.0.56
Package Id
alif-ui-test@1.0.56
Unpacked Size
1.17 MB
Size
467.87 kB
File Count
86
Published on
Aug 22, 2024
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
46
@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-importshuskyjestjest-environment-jsdomlint-stagedprettierreactreact-domsassstorybookstyle-dictionarystylelintstylelint-config-standardts-jesttypescriptvitevite-plugin-dtsvite-plugin-libcssvite-plugin-lintervite-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'. 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.
1import { AlifProvider } from 'alif-ui'; 2 3function App() { 4 return ( 5 <AlifProvider brand="alif" initialMode="light"> 6 {/* Your application components */} 7 </AlifProvider> 8 ); 9} 10 11export 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
1'use client'; 2 3import { ReactNode } from 'react'; 4import { AlifProvider } from 'alif-ui'; // Adjust the import path accordingly 5 6interface ClientProviderWrapperProps { 7 children: ReactNode; 8} 9 10const ClientProviderWrapper = ({ children }: ClientProviderWrapperProps) => { 11 return ( 12 <AlifProvider initialMode="light" brand="alif"> 13 {children} 14 </AlifProvider> 15 ); 16}; 17 18export default ClientProviderWrapper;
2. Update the Root Layout File: app/layout.tsx
1import { ReactNode } from 'react'; 2import ClientProviderWrapper from '../components/ClientProviderWrapper'; // Adjust the import path accordingly 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;
Documentation
Visit https://ui.alif.tj to view the full documentation.
No vulnerabilities found.
No security vulnerabilities found.