Klyv Quick Actions

Component

About

The icon-over-label action row from the balance card, with optional keyboard shortcuts shown on the controls rather than hidden in a help page.

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

Code

How Klyv Quick Actions is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useState } from "react";
import { CreditCard, Plus, QrCode, Send } from "lucide-react";
import { Button } from "@/components/ui/klyv-quick-actions-utils/components-Button-Button";
import { Card } from "@/components/ui/klyv-quick-actions-utils/components-Card-Card";
import { QuickActions } from "@/components/ui/klyv-quick-actions";
import { Text } from "@/components/ui/klyv-quick-actions-utils/components-Text-Text";

function QuickActionsExample() {
  const [last, setLast] = useState('none')
  const [shortcuts, setShortcuts] = useState(true)
  return (
    <div className="flex w-full flex-col items-start gap-3">
      <Card title="US Dollar" className="w-full max-w-[380px]">
        <Text size="label" tone="faint" className="mt-3">
          Your Balance
        </Text>
        <Text size="display" tabular className="mt-1">
          $27,829.83
        </Text>
        <QuickActions
          className="mt-5"
          shortcuts={shortcuts}
          actions={[
            { id: 'send', label: 'Send', icon: Send, primary: true, shortcut: 's', hint: 'Send money to a recipient', onSelect: () => setLast('Send') },
            { id: 'pay', label: 'Payments', icon: CreditCard, shortcut: 'p', hint: 'Pay a bill', onSelect: () => setLast('Payments') },
            { id: 'qr', label: 'QR', icon: QrCode, shortcut: 'q', hint: 'Show your payment code', onSelect: () => setLast('QR') },
            { id: 'more', label: 'More', icon: Plus, hint: 'Everything else', onSelect: () => setLast('More') },
          ]}
        />
      </Card>
      <div className="flex flex-wrap items-center gap-3">
        <Button size="sm" variant="outline" onClick={() => setShortcuts((value) => !value)}>
          {shortcuts ? 'Turn shortcuts off' : 'Turn shortcuts on'}
        </Button>
        <Text size="caption" tone="faint" role="status" aria-live="polite">
          Last: {last}
          {shortcuts ? ' · try Cmd+S' : ''}
        </Text>
      </div>
    </div>
  )
}

export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><QuickActionsExample /></div></div>}