Help Button

Buttons 74

About

Here is help button component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Help Button to your project and fits it to your theme.

Code

How Help Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
'use client';

import * as React from 'react';
import { Github, Linkedin, Twitter, Box } from 'lucide-react';
import HelpButton from '@/components/ui/help-button';
import type { HelpLink, WhatsNewItem, ShortcutItem } from '@/components/ui/help-button';

const socialLinks: HelpLink[] = [
   { icon: Twitter, name: 'Twitter / X', href: 'https://x.com/shadcn' },
   { icon: Linkedin, name: 'LinkedIn', href: 'https://linkedin.com/in/shadcn' },
   { icon: Github, name: 'GitHub', href: 'https://github.com/shadcn' },
];

const supportLink: HelpLink = {
   icon: Box,
   name: 'Support Project',
   href: '#',
};

const whatsNewItems: WhatsNewItem[] = [
   { name: 'Vercel Ship 2024', href: '#', isNew: true },
   { name: 'New Component: Carousel', href: '#', isNew: true },
   { name: 'CLI Improvements', href: '#', isNew: false },
];

const shortcutItems: ShortcutItem[] = [{ name: 'Keyboard shortcuts', shortcut: '⌘K' }];

const HelpButtonDemo = () => {
   return (
      <div className="flex h-[300px] w-full items-start justify-center p-10">
         <HelpButton
            socialLinks={socialLinks}
            supportLink={supportLink}
            whatsNewItems={whatsNewItems}
            shortcutItems={shortcutItems}
         />
      </div>
   );
};

export { HelpButtonDemo as DemoOne };