Skip to main content

​
NPM Installation

Install the package using npm: 
npm install @abdalkader/component-library
Or using yarn: 
yarn add @abdalkader/component-library
Or using pnpm: 
pnpm add @abdalkader/component-library

​
Peer Dependencies

The library requires React 16.8 or higher: 
{
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  }
}

​
Import Styles

Import the CSS file in your application entry point: 
import '@abdalkader/component-library/dist/styles.css';

​
Next.js

In _app.tsx or _app.js: 
import '@abdalkader/component-library/dist/styles.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

​
Create React App

In src/index.tsx or src/index.js: 
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@abdalkader/component-library/dist/styles.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(<App />);

​
Vite

In src/main.tsx: 
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@abdalkader/component-library/dist/styles.css';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

​
TypeScript Configuration

The library includes TypeScript definitions. No additional configuration needed. For optimal type checking, ensure your tsconfig.json includes: 
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

​
Tree Shaking

The library is optimized for tree-shaking. Import only what you need: 
// ✅ Good - Only imports Button
import { Button } from '@abdalkader/component-library';

// ❌ Avoid - Imports everything
import * as Components from '@abdalkader/component-library';

​
Verification

Verify the installation by creating a simple component: 
import { Button } from '@abdalkader/component-library';

function App() {
  return (
    <Button variant="primary" onClick={() => alert('Hello!')}>
      Click me
    </Button>
  );
}

export default App;
If you see a styled button, the installation was successful!

​
Next Steps

Quick Start

Build your first component

Components

Explore available components