Add Map Fast-Travel to your Roblox project in one command. Requires Node 18+ and a Roblox project — run robloxui init first if you don't have one yet. See the docs.
bashnpx robloxui add map-fast-travelFirst time? Start with the documentation.
import { Map Fast-Travel } from "./src/client/ui/components/map-fast-travel";local MapService = require(script.Parent.MapService)
local map = MapService.new({
{ id = "town", name = "Town", position = Vector2.new(0.3, 0.5), discovered = true },
{ id = "cave", name = "Cave", position = Vector2.new(0.7, 0.3), discovered = false },
})
map.onTravel = function(id) print("Travelling to", id) end
map:Discover("cave"); map:FastTravel("cave")Discovered-points fast-travel map. MapService holds points (map-space UDim2 position + discovered flag); Discover(id) marks known and FastTravel(id) only fires onTravel for discovered points. MapView renders the map background with discovered pins (labeled) and undiscovered pins (?), click a discovered pin to fast-travel.
by RobloxUI Team
| Author | RobloxUI Team |
| Framework | Roblox-TS + React-Luau |
| Category | Settings |
| Dependencies | @rbxts/react |
| Theme Tokens |
| colors.primary, colors.primaryLight, colors.primaryDark, colors.secondary, colors.secondaryLight, colors.secondaryDark, colors.accent, colors.accentLight, colors.accentDark, colors.bg, colors.bgSecondary, colors.bgTertiary, colors.surface, colors.border, colors.borderLight, colors.glow, colors.text, colors.textPrimary, colors.textSecondary, colors.textMuted, colors.success, colors.successLight, colors.error, colors.errorLight, colors.warning, colors.info, colors.gold, colors.goldLight, gradients.primary, gradients.gold, gradients.health, gradients.mana, gradients.purple, gradients.card, gradients.surface, gradients.surfaceLight, spacing.3xs, spacing.2xs, spacing.xs, spacing.sm, spacing.md, spacing.lg, spacing.xl, radius.sm, radius.md, radius.lg, radius.xl |
| Last Updated | July 31, 2026 |