Getting started

Installation

Install the package with pnpm/npm/yarn.

npm i slidenote

Add Slidenote to your Tailwind config.

// tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    // Add this line
    "./node_modules/slidenote/**/*.{js,jsx,ts,tsx}",
  ],
  // ... rest of config
};

Usage

Quick start

import { Slidenote } from "slidenote";

function MyComponent() {
  return (
    <Slidenote className="rounded-l-xl bg-white p-4 shadow-xl">
      {/*
        Your content here
      */}
    </Slidenote>
  );
}

Or customise the slide-in direction and position.

import { Slidenote } from "slidenote";

function MyComponent() {
  return (
    <Slidenote from='left' className="bottom-2/3 rounded-r-xl bg-white p-4 shadow-xl">
      {/*
        Your content here
      */}
    </Slidenote>
  );
}

API