Blocks/Workflow

Production-ready React blocks built with Tailwind CSS and shadcn/ui. Copy, paste, and customize for your next project.

PRO

workflow1

Hero with Workflow Recipe

Two-column workflow hero with a live automation recipe card on the right showing a multi-app stack and installs counter.

PRO

workflow2

Three Cards With Workflow Assets

Three feature cards that swap icons for live workflow pieces: an app picker, a configurable step, and an active toggle.

PRO

workflow3

Accordion With Workflow Media

Accordion on the left, swappable workflow asset on the right. Each row picks its own piece: trigger pair, step config, approval gate, or test run.

PRO

workflow4

Workflow Stats With Live Tiles

Three-column stats strip where each metric is anchored by a real workflow piece: active runs, success rate, and approvals.

PRO

workflow5

Reliability CTA With Failed Run

Two-column CTA paired with a failed-run retry card. Copy talks reliability while the asset shows the actual recovery surface.

PRO

workflow6

Trigger Library Showcase

Asymmetric showcase: a tall image hero on the left paired with two stacked workflow assets on the right — recipe card and trigger/action pair.

PRO

workflow7

Zigzag Process Steps

Four-step zigzag flow that alternates a workflow piece between sides. Each row pairs a numbered step with the live asset it produces.

PRO

workflow8

Manual vs Automated Comparison

Side-by-side card contrasting the manual inbox with the live workflow tile. A real email asset on the left, a real trigger/action pair on the right.

PRO

workflow9

Customer Story With Workflow Pair

Editorial customer story card: a pull quote on top, then a two-piece pair showing the actual workflow the customer ships — an active toggle and an approval gate.

PRO

workflow10

Tabbed Use Cases

Tabbed showcase where each tab swaps a team's typical workflow surface. Left side carries the story, right side carries the live asset.

PRO

workflow11

Hero With Workflow Pieces Strip

Minimal centered hero with a three-tile strip of workflow pieces underneath: delay, email, and approval surfaces.

PRO

workflow12

Workflow Canvas Hero

Hero with a full canvas on the right showing a real workflow flow: trigger node, condition node, and two action branches connected with lines.

PRO

workflow13

Trigger Marketplace

Full-width trigger picker with search, category filters, and a 12-app grid. Drop-in app marketplace showcase for any automation product.

PRO

workflow14

Run History Timeline

Full-width run history table showing live workflow runs with status pills, duration, started-at timestamps, and per-row actions.

PRO

workflow15

Recipe Marketplace Grid

Recipe marketplace with filter chips and a six-card grid. Each card stacks the apps it connects, the installs counter, and a use-recipe CTA.

PRO

workflow16

Visual Workflow Builder Mockup

Three-pane builder mockup: a step sidebar, a node canvas with connected workflow nodes, and a properties panel for the selected step.

PRO

workflow17

Workflow Analytics Dashboard

Full-width analytics card with four KPI tiles, a CSS bar chart of the last 30 days, and a top-workflows leaderboard with share bars.

PRO

workflow18

Workflow Pricing Tiers

Three pricing tiers tuned to workflow products: run quotas, workflow counts, and integration limits with a featured plan highlighted.

PRO

workflow19

Workflow Onboarding Checklist

Onboarding card with a progress bar and a six-step checklist. Each step shows a completion state, a title, and a short hint.

PRO

workflow20

Live Status Banner

Minimal uptime banner: live status pill, a 90-day color-coded bar strip, and a single percentage. Reads at a glance — operational, degraded, or in incident.

PRO

workflow21

Workflow API & Webhook Tabs

Developer-facing split: copy on the left, tabbed code blocks on the right showing the API request, response, and webhook payload for a workflow.

PRO

workflow22

Live Ops Counter Banner

Minimal live-ops banner: pulsing live dot, a big in-flight workflow counter, a 24-bar throughput strip, and a three-stat footer.

PRO

workflow23

Usage Quota Meter

Minimal quota meter card: header with usage label, large used/limit counter, a single progress bar, and a reset countdown footer.

PRO

workflow24

Upcoming Schedules Banner

Minimal upcoming-runs banner: calendar header, a featured next-run callout, and four compact upcoming entries with relative timing and cron expression.