Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Google Cloud Setup Integration Block for React

An integration setup section for an event pipeline connecting to Google Cloud: a project ID that is checked as you type, four gcloud commands built around it, a key-file drop zone that never reads the file, a dataset and a location.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An integration setup section for React with Base UI, written for Ferrybase, a fictional tool that streams product events into BigQuery tables in your own Google Cloud project. A split with a divider that runs from the top rule to the block's foot. The start column has the header and three numbered steps: a project ID checked against Google Cloud's own rules as you type (6 to 30 lowercase letters, digits and hyphens, a letter first, no hyphen last), the five gcloud commands that create a service account, grant it roles/bigquery.dataEditor, roles/bigquery.jobUser and roles/pubsub.subscriber and write its key, built around that project ID in a scrolling code block with a Copy button, and a note on keeping the key file. The end column holds the mark pair, a drop zone for the key file, a dataset picker, a US or EU location, a readiness list and a Finish setup button that stays unavailable, with the reason beside it, until the project ID, the file and the dataset are set. Nothing connects: the dropped file is never read or uploaded, only its name and size are shown, and the block says so. Finish setup ends on "Connected in this demo" and a ghost Disconnect. Google Cloud is named in text only: its lettermark tile is a neutral placeholder and no logo, colour or wordmark ships. The product, project names and datasets are example data.

FAQ

Does the drop zone read or upload my key file?

No. The drop zone checks the name ends in .json and the size is under 100 KB (a real key file is a few kilobytes), then shows its name and size in a row you can remove. The file's contents are never read in the browser and nothing is sent anywhere, and the block says "Nothing is uploaded or read in this demo" beside the drop zone. Where finish runs, a code comment marks the place to hand the file to your own server. Dropping a second file replaces the first, and a file that is not a .json or is over 100 KB is refused with a reason in the same space.

Are the gcloud commands real?

Yes. They use gcloud iam service-accounts create, gcloud projects add-iam-policy-binding three times and gcloud iam service-accounts keys create, with the service account's address built as ferrybase-loader@<project>.iam.gserviceaccount.com. They carry the project ID you typed once it is valid, and PROJECT_ID until then. The block only shows and copies them; it runs nothing.

Why those three roles?

roles/bigquery.dataEditor lets the account create tables and write rows in datasets, roles/bigquery.jobUser lets it run jobs (the load jobs that move each batch) in the project, and roles/pubsub.subscriber lets it read your events from a subscription. Change the --role lines in commandsOf to match what your product needs, and keep the roles in the paragraph above the commands in step with them. If your organization blocks key creation (the iam.disableServiceAccountKeyCreation policy), the last command is refused, which step 3 says.

What do the location choices mean?

US and EU are BigQuery's multi-regions: data centres in the United States, and in member states of the European Union. The line under the choice repeats which one is picked. Add regions to PLACES if you offer them.

What does Finish setup do?

It changes local state only and the polite status line says "Connected in this demo. Nothing was sent to Google Cloud, and no key file was read." Disconnect turns it back. Wire finish to your own endpoint, with the key file's contents read where your server can keep them safe.

How does it fit a phone, right-to-left layouts and reduced motion?

Below lg the divider gives way to a rule and the end column stacks under the steps. The commands scroll sideways inside a focusable region. In a right-to-left layout the columns and the step rail flip while project IDs, commands and file names keep their left-to-right order. The header fades up once on load, and not at all with reduced motion.

  • Pro

    An integration detail section for an event-loading tool connecting to Google Cloud: a header with the mark pair and Connect Google Cloud, three steps, a live project ID field, and an accordion of three IAM roles whose gcloud commands already carry the project ID typed, each with a Copy button.

  • Pro

    Google Cloud Grid Integration

    Switch and tick grids

    An integration grid section for an event-loading tool connecting to Google Cloud: four export tables as a two-by-two of cells, each with an indeterminate parent checkbox over its BigQuery columns, personal-data columns off by default, and a worked-out tally.

  • Pro

    An integration list section for an event-loading tool connecting to Google Cloud: daily BigQuery partitions as rows in a fixed, focusable window seven rows tall, a 7 or 14 day choice, size and a bar worked out from the rows, and a working Backfill on the days that failed or arrived short.

  • Pro

    An integration stats section for an event pipeline on Google Cloud: a gauge of how much of BigQuery's free query tier the dashboards used, three figures and the three biggest queries, all derived from typed data.

  • Pro

    An integration setup flow for a cloud cost tool connecting to AWS: a scope and 12-digit account ID, two aws iam commands built from that ID with a derived External ID, and a pasted role ARN that is parsed and checked against the account.

  • Pro

    File Attachments Contact

    Support and feedback

    A support request on a card in card with a file drop zone: up to four PDFs or images, a progress bar per file, an error row for a wrong type, and a form that waits for the files before it sends.