Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Endpoint Manager CRUD Block for Radix UI

An API gateway console window with routes grouped by resource at the start and the chosen route's form at the end, a path matcher that flags conflicts such as GET /users/:id matching GET /users/me, and a Delete that unlocks after Deprecate.

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

Manage the routes of an API gateway and catch overlaps before they ship, with this endpoint manager for React with Radix UI. A fixed-height window has a top bar with the product name, a count of route conflicts and the one primary, New route, a Shine Button. At the start, eleven routes sit under sticky resource headings (/users, /orders, /invoices, /health), each a button with its method, its path and a Deprecated word; a filter field narrows them. At the end, the chosen route's form takes a method in a Native Select, a path, a token requirement in a Switch, a rate limit and a description; the same form is blank for a new route. A path must start with a slash and may use :id parts, and a small matcher compares it with every other route of the same method, so GET /users/:id also matches GET /users/me appears under the field while you type and in the top bar's count. A conflict warns; an exact duplicate is refused. Save waits until something changed. Deprecate adds a word to the route, and only then does Delete unlock, leaving an Undo line in the foot. Below the medium breakpoint it shows one pane at a time with a Back button. For gateway consoles, route tables and any list whose records must not overlap.

FAQ

How do I fill it with my routes?

Edit ROUTES. Each has an id, a method, a path, a limit in requests a minute, an auth flag, a deprecated flag and a short note. The groups are the first path part of each route, in the order they first appear, and the conflict count is derived from the paths, so nothing is typed twice.

How does the conflict check work?

Two routes of the same method conflict when their paths have the same number of parts and every pair of parts is equal or one of them is a :param. So /users/:id also matches /users/me, while /users/:id and /users/:id/status do not clash. The matcher is a few lines in overlaps; swap it for your router's own rules if they differ, for example to let a literal win over a parameter.

What is refused, and what only warns?

A path must start with a slash, use lowercase parts or :name parameters and stay within 48 characters; the rate limit must be a whole number from 1 to 10,000; an exact duplicate of another route's method and path is refused. A conflict that is not an exact duplicate warns under the path and in the polite line after Save, because a literal route may deliberately sit beside a parameter route.

Why is Delete locked at first?

A route clients still call should not vanish in one click, so Delete stays aria-disabled with its reason in text until the route is deprecated. Pressing it early says what to do in the polite line. Deleting leaves an Undo in the foot that brings the route back and selects it.

What stays local, and how do I wire a real gateway?

Routes live in React state in this tab and a reload brings the original eleven back; nothing is deployed. In your app call your gateway's API from save, deprecate and remove, and show a server refusal in the same Problem slot under the path.

How does it look on a phone?

One pane at a time: the list first, then the form with a Back to routes button that returns focus to the route you left. The top bar keeps the title and New route, and the conflict count moves into the list's header line.