Registry

Copy it in, own it

Every component installs with the shadcn CLI and becomes your code. Each one runs in the browser and in the game’s Chromium 103, and sizes itself in tokens so the NUI can scale it.

Components

BadgeA short square label: a status, a tier, a count.ButtonThe call to action: square, in the accent, in small caps.CardA panel — solid, glass or ghost — with optional accent ticks.CheckboxA square checkbox that does not steal the NUI’s keyboard.DialogA modal framed in accent ticks, over an ink scrim.Dropdown menuA menu of actions, checkboxes and radio items.Icon buttonA square button holding one icon, with a required accessible name.InputA single-line field, with optional adornments inside it.LabelA field’s label, dimmed with its disabled peer.SelectA DOM select — never the native one, which the NUI cannot show.SeparatorA hairline.SheetA panel that slides in from an edge.SkeletonA square loading placeholder.SwitchA square on/off toggle.TabsLine tabs for sections, segmented tabs for switching a view in place.TextareaA multi-line field matching Input.ToasterSonner notifications in the brand’s dress.TooltipA hint on hover that brings its own provider.UI soundsTwelve sounds for every component’s actions, and the player that plays them.

Game UI

Checkout barThe total on an accent band, the receipt above, the confirm under.Colour gridA palette of square swatches, walked by row.Key hintA keycap and what it does: "E Etkileşim", "ESC Geri".Menu choiceOne of a few as blocks: Nakit / Banka.Menu listThe menu’s rows — items, toggles — walked with the arrow keys.Menu screenThe layout every in-game menu shares: tabs, wallet, list, checkout, hints.Menu sliderA value on a menu row, never a native range input.Menu tabsA menu’s sections on Q / E, the white block gliding between them.Menu viewThe content that changes with a tab or a step in, sliding the way you went.MeterA HUD bar — health, fuel, progress — that glows and blinks low.Option stepperCycle a set with ‹ ›: a shirt’s model, a texture, a quantity.PanelThe menu window: header, body, and a footer for key hints.Price tagA figure in a solid block: cash, bank, a price.Ring meterA gauge filling round an icon.TileAn inventory or weapon-wheel slot, with the selection frame.

Brand

Accent scopePaints a subtree in another city’s colour.BracketedA title between two corner ticks, as the web site sets every heading.Corner ticksThe L-shaped corner marks the brand frames things with.FAST markThe wordmark and the bolt, inline, painted by the theme and the accent.Grid backgroundThe line grid or dot matrix behind a hero, fading into the ground.Section headingEyebrow, framed display title and a line of lead.Server statusA network or city status pill: dot, label, count.Status dotA round status light, with an optional live pulse.

Motion

Fade inA block that rises into place as it scrolls into view.Lazy videoA muted loop that loads near the viewport and plays only on screen.RevealA headline line rising out of its own baseline.Scroll rootA page that scrolls its own element, and the hook that finds it.

Patterns

City slabOne city, a full screen: its footage, its colour, its name set enormous.Comparison tableCities or plans side by side, row by row.Cover collageStills laid out like the game’s box art, assembled by the scroll.FAQ accordionQuestions with one answer open at a time.FAST badgeThe box-art title panel: the mark on the brand yellow.Horizontal reelA row scrolled sideways by scrolling down, with a progress hairline.Logo mask heroA giant mark with footage through its letters; scrolling flies into it.Stacked chaptersFull-screen chapters that pin and sink back as the next slides over.Step cardsA short numbered sequence in glass cards.