City Time: free React block

Install

Run this in any project set up for the shadcn CLI. It copies the City Time source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/city-time.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { CityTime } from "@/components/city-time";

export default function Page() {
  return <CityTime />;
}

Built with

A free React block in the Apps collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

coss ui: combobox, segmented-control
npm: lucide-react, motion

Props

Read from the City Time source. Everything is optional unless it says required.

Prop	Type	Default
cities	City[]	defaultCities
defaultCity	string	—
workingHours	{ start: number; end: number }	{ start: 9, end: 17 }
defaultHourCycle	HourCycle	"24h"
locale	string	"en-GB"
className	string	—

More in Apps

169

Kanban Board

A team board you can really work in: drag cards between columns, add one with a keystroke, filter by label, and open any card for its checklist and notes.

170

Connector Marketplace

A place to browse the apps that plug into your product: filter by category, search, and connect one through a short permissions step that shows the link being made.

171

Assistant App

A small, complete assistant with chats and projects in the sidebar, files you can attach, and replies that write themselves out word by word.

172

Checkout Summary

A checkout with generic express-pay buttons, delivery options that slide a selection ring, quantity steppers, a promo field that validates, and totals whose digits roll as anything changes.