> ## Documentation Index
> Fetch the complete documentation index at: https://docs.abdalkader.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Install and set up the Component Library in your React project

## NPM Installation

Install the package using npm:

```bash theme={null}
npm install @abdalkader/component-library
```

Or using yarn:

```bash theme={null}
yarn add @abdalkader/component-library
```

Or using pnpm:

```bash theme={null}
pnpm add @abdalkader/component-library
```

## Peer Dependencies

The library requires React 16.8 or higher:

```json theme={null}
{
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  }
}
```

## Import Styles

Import the CSS file in your application entry point:

```tsx theme={null}
import '@abdalkader/component-library/dist/styles.css';
```

### Next.js

In `_app.tsx` or `_app.js`:

```tsx theme={null}
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`:

```tsx theme={null}
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`:

```tsx theme={null}
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:

```json theme={null}
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}
```

## Tree Shaking

The library is optimized for tree-shaking. Import only what you need:

```tsx theme={null}
// ✅ 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:

```tsx theme={null}
import { Button } from '@abdalkader/component-library';

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

export default App;
```

<Check>
  If you see a styled button, the installation was successful!
</Check>

## Next Steps

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/docs/quickstart">
    Build your first component
  </Card>

  <Card title="Components" icon="grid" href="/components/button">
    Explore available components
  </Card>
</CardGroup>