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

# Installation

> Install and set up DevReady Kit in your React project

## Install Free Version

### From npm Registry

```bash theme={null}
# with npm
npm install @peppermint-design/devreadykit

# or with yarn
yarn add @peppermint-design/devreadykit

# or with pnpm
pnpm add @peppermint-design/devreadykit
```

### From GitHub

You can also install the free version directly from GitHub:

```bash theme={null}
# with npm
npm install github:peppermint-id/DevReadyKit

# or with yarn
yarn add github:peppermint-id/DevReadyKit

# or with pnpm
pnpm add github:peppermint-id/DevReadyKit
```

Or using the full GitHub URL:

```bash theme={null}
npm install https://github.com/peppermint-id/DevReadyKit
```

> **Repository:** [peppermint-id/DevReadyKit](https://github.com/peppermint-id/DevReadyKit)

## Install Custom Version (with Token)

> **Get access:** Request access and generate your personal auth token at [devreadykit.com](https://devreadykit.com/).

```bash theme={null}
# with npm
npm config set @peppermint-design:registry https://registry.npmjs.org
npm config set //registry.npmjs.org/:_authToken <TOKEN>
npm config set always-auth true
npm i @peppermint-design/devreadykit
```

## Peer Dependencies

Make sure your app has:

* `react` >= 18
* `react-dom` >= 18

## Styling Setup

Components are styled using Tailwind utility classes. You can use them without Tailwind, but we strongly recommend enabling Tailwind for consistent styling.

### With Tailwind CSS

1. Install Tailwind CSS in your project:

```bash theme={null}
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

2. Configure your `tailwind.config.js`:

```js theme={null}
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@peppermint-design/devreadykit/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

3. Import Tailwind styles in your main CSS file:

```css theme={null}
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Without Tailwind CSS

You can use the components without Tailwind, but you'll need to provide your own styling or use the component's built-in classes.

## Basic Usage

Once installed, you can import and use components:

```tsx theme={null}
import { Button, Input } from "@peppermint-design/devreadykit-custom";

export default function Form() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: "20px",
        padding: "20px",
      }}
    >
      <Input placeholder="Amount" type="number" startIcon="$" />
      <Button variant="filled" color="primary">
        Submit
      </Button>
    </div>
  );
}
```

## Next Steps

* Check out the [Available Components](/available-components) overview
* Learn about [Theming](/theming) customization options
* Explore individual component documentation in the Components section