Skip to main content

​
Install Free Version

​
From npm Registry

# 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: 
# 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: 
npm install https://github.com/peppermint-id/DevReadyKit
Repository: peppermint-id/DevReadyKit

​
Install Custom Version (with Token)

Get access: Request access and generate your personal auth token at devreadykit.com. 
# 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:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  1. Configure your tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@peppermint-design/devreadykit/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. Import Tailwind styles in your main CSS file:
@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: 
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 overview
  • Learn about Theming customization options
  • Explore individual component documentation in the Components section