Skip to main content
Book a demo

Connect shadcn/ui to VS Code

Give VS Code governed access to shadcn/ui’s 7 tools through Runlayer, with identity, policy, scanning, and audit on every call.

Book a demo VS Code setup guide

Set up

Add shadcn/ui to VS Code in four steps

Admins approve the server once. Everyone in VS Code then gets it through the same governed connection.

  1. 1

    Approve shadcn/ui in Runlayer

    Add shadcn/ui from the catalog and choose who can use it and which of its tools are allowed.

  2. 2

    Connect VS Code to Runlayer

    Install the Runlayer CLI so VS Code can reach shadcn/ui, which runs on the user’s machine. Auto Sync can then write shadcn/ui into VS Code on macOS, Windows, and Linux.

    VS Code setup guide
  3. 3

    Sign in to shadcn/ui

    Sign in the way shadcn/ui requires. Runlayer holds the credentials so they stay out of the client’s configuration.

  4. 4

    Use shadcn/ui from VS Code

    shadcn/ui’s approved tools appear in VS Code. Every call is checked against policy and recorded.

Tools

7 shadcn/ui tools in VS Code

Runlayer policy decides which of these VS Code users can call.

  • Get project registries

    Get configured registry names from components.json - Returns error if no components.json exists (use init_project to create one)

  • List items in registries

    List items from registries (requires components.json - use init_project if missing)

  • Search items in registries

    Search for components in registries using fuzzy matching (requires components.json).

  • View items in registries

    View detailed information about specific registry items including the name, description, type and files content.

  • Get item examples from registries

    Find usage examples and demos with their complete code.

  • Get add command for items

    Get the shadcn CLI add command for specific items in a registry.

  • Get audit checklist

    Make sure to run the tool after all required steps have been completed.

Control

What Runlayer can see and stop in VS Code

Some controls apply to every client at the gateway. Others depend on what VS Code exposes to Runlayer.

  • Gateway policy (available)

    Every shadcn/ui call from VS Code passes through Runlayer, where your policies can allow, alert, mask, or block it.

  • Audit trail (available)

    Each call is recorded with the user, VS Code as the client, the tool, and the policy and scanner decisions.

  • Client hooks (available)

    Capture supported prompts, reasoning, local and MCP tool calls, responses, and scanner decisions in real time.

  • Stop a call before it runs (available)

    Runlayer can deny a tool call before VS Code runs it.

  • Block output after it runs (available)

    Runlayer can block a tool’s output before VS Code’s model sees it.

  • Redact output in place (available)

    Runlayer can mask sensitive parts of a tool’s output in VS Code and pass the rest through.

Frequently asked questions

Connect more

Find another combination