Installation

npm install @abdalkader/component-library

yarn add @abdalkader/component-library

pnpm add @abdalkader/component-library

{
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  }
}

import '@abdalkader/component-library/dist/styles.css';

import '@abdalkader/component-library/dist/styles.css';
import type { AppProps } from 'next/app';

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

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 />);

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>
);

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

// ✅ Good - Only imports Button
import { Button } from '@abdalkader/component-library';

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

import { Button } from '@abdalkader/component-library';

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

export default App;