Skip to main content
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';

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
⌘I