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

• Engine
• HelpPortal
• Overlay
• Playground

UI Layer

• HelpModal UI
• Drawer Mode

Enhancements

• Animations
• Theme System
• Keyboard Shortcut
• Support search in markdown mode

Content Features

• Route-based Help
• Markdown Support
• Images Support
• Video Support
• FAQ
• Search

Quality & Release

• Storybook
• Tests
• GitHub Actions
• npm Publish