For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
Best for: A dark live timing screen for a short race, where a kart picked on the circuit, the plan, the ladder or the standings is followed everywhere
When to use
- Match day tickets sold by sector, the sector picked on a 3D stadium bowl you orbit or on a 2D seating plan
- Live race timing, karts lapping a 3D circuit and one pick shared by the plan, the gap ladder and the standings
- A 3D model of a physical place that shares its selection with a 2D plan and the panels around it
When not to use
- A results table of laps, best times and points after the race, with no circuit to watch: use the Base blocks
- A diagram of nodes and edges for a process or a system, not a physical place: use the Flow blocks
- A month card of upcoming fixtures and their kickoff times, with no venue or seats to pick: use the Schedule blocks
- Venue or site figures as KPI tiles and charts, with nothing to pick in a scene: use the Dashboard blocks
Agent notes
- Replace
progressOf,standingsAt,bestLapOf,FASTESTand theraceClockdemo loop in data.ts with your timing feed;ROSTERholds the drivers CONTROLin track-geometry.ts shapes the circuit and is rescaled toLAP_METRES; the 1,200 m and 14 corners label is separate, inCIRCUITRaceConsoletakes no props and keeps the selection inside, so a live feed means adding props for the standings and the roster@react-three/fiberlists React 19 as a peer, so a React 18 app must upgrade React before adding a blockthreeships no type declarations, so a TypeScript project also needs @types/three as a dev dependency- Both consoles pin the
darkclass on their root, so they render dark inside a light app whatever its theme
Third-party API docs
- three.js: API reference, docs (pre-1.0, so any 0.x release (r186 here) can change the API, and threejs.org documents only the latest)
- React Three Fiber v9: API reference, docs
- camera-controls v3: API reference, docs
- Motion v12: API reference, docs (the docs follow the latest Motion, with no React API break since v12)
https://reui.io/blocks/solutions/digital-twin/solution-digital-twin-2.mdget_block("solution-digital-twin-2")npx shadcn@latest add @reui/solution-digital-twin-2Shadcn Components in the Kart Live Timing Block
Dependencies
- @react-three/fiber
- camera-controls
- cn
- motion
- three
Shadcn Kart Live Timing Block
Live kart race timing on a 3D circuit, with a gap to leader ladder, live standings and a driver card. Part of the ReUI Shadcn Solutions Digital Twin blocks collection.
Live timing for a 20 lap kart race: 15 karts lap a 3D circuit you orbit or a 2D plan, with a gap to leader ladder, live standings and a driver card. ReUI Frame, Badge; shadcn ToggleGroup, ButtonGroup, Spinner; React Three Fiber, Motion. Live timing, motorsport.
It is composed from Badge, Button, Button Group, Frame, Spinner, Toggle Group, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Kart Live Timing Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn Solutions Digital Twin blocks to assemble a full screen instead of a single section.
All Shadcn Solutions Digital Twin Blocks
The rest of this category, each on its own page with a live preview, the components it is built from, and the install command.
- Stadium Seats 3D stadium seat picker by sector for match tickets, with a synced 2D seating plan and price timeline
Related Shadcn Solutions Block Categories
- Dev Ops (6) Platform and SRE console pages for scheduled jobs, deployments, audit trails, edge firewall rules, SLOs and data connections.
- AI Ops (9) AI startup control plane pages for model providers, prompts, token cost, routing, and quotas.
- CRM (9) Sales CRM pages for founders, agencies, and startups managing leads and deals.
- Agents (10) AI agent run operation, approval, tool permission, and evaluation pages.
- Analytics (9) Product usage, activation, cohort, event, experiment, and growth reporting pages.
- Billing (9) Subscription, invoice, metering, plan, upgrade, and failed payment pages.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (43) Browse 43 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (51) Browse 51 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (18) Browse 18 Shadcn AI & Agents blocks across 2 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use the Kart Live Timing block?
Use it for a dark live timing screen for a short race, where a kart picked on the circuit, the plan, the ladder or the standings is followed everywhere.
The Digital Twin category fits:
- Match day tickets sold by sector, the sector picked on a 3D stadium bowl you orbit or on a 2D seating plan
- Live race timing, karts lapping a 3D circuit and one pick shared by the plan, the gap ladder and the standings
- A 3D model of a physical place that shares its selection with a 2D plan and the panels around it
For a results table of laps, best times and points after the race, with no circuit to watch, use the Base blocks. For a diagram of nodes and edges for a process or a system, not a physical place, use the Flow blocks. For a month card of upcoming fixtures and their kickoff times, with no venue or seats to pick, use the Schedule blocks. For venue or site figures as KPI tiles and charts, with nothing to pick in a scene, use the Dashboard blocks.
What is the Kart Live Timing block built with?
Can I restyle the Kart Live Timing block?
How should I use Shadcn digital twin blocks in a real project?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.