Tiply

A beautiful, accessible, and developer-friendly help system for React

Add contextual help (Modal • Drawer • Popover) with smooth animations, Markdown, search, and full accessibility.

Live Demo →

✨ Features

• Multiple Variants: Modal, Drawer (Left / Right / Bottom)
• Full Accessibility: Focus trap, keyboard shortcuts, ARIA compliant
• Rich Content: Markdown support + powerful search
• Theme System: Auto / Light / Dark (respects system preference)
• Smooth Animations with excellent performance
• TypeScript support out of the box
• Lightweight & tree-shakable

🚀 Quick Start

1. Installation

npm install @tiply-dev/tiply
# or
pnpm add @tiply-dev/tiply
# or
yarn add @tiply-dev/tiply

🎮 Usage

import "@tiply-dev/tiply/styles.css";
import { HelpProvider, HelpButton } from '@tiply-dev/tiply';

function App() {
  return (
    <HelpProvider
      data={helpData}        // Your help content
      variant="modal"        // "modal" | "drawer"
      theme="auto"
    >
      <YourApplication />
      
      {/* Floating help button */}
      <HelpButton page="dashboard" />
    </HelpProvider>
  );
}

📝 Todo

Core

• [x] Engine
• [x] HelpPortal
• [x] Overlay
• [x] Playground

UI Layer

• [x] HelpModal UI
• [x] Drawer Mode

Enhancements

• [x] Animations
• [x] Theme System
• [x] Keyboard Shortcut
• [ ] Support search in markdown mode

Content Features

• [x] Route-based Help
• [x] Markdown Support
• [ ] Images Support
• [ ] Video Support
• [ ] FAQ
• [x] Search

Quality & Release

• [ ] Storybook
• [ ] Tests
• [x] GitHub Actions
• [x] npm Publish