HomeDocsComponentsBlocksChartsThemes
Introduction
  • Introduction
  • Installation
  • Themes
  • llms.txt
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Amount
  • Aspect Ratio
  • Audio Player
  • Avatar
  • Avatar Upload
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Code Block
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy Button
  • Countdown
  • Data Grid
  • Data Table
  • Date Picker
  • Date Range Picker
  • Description List
  • Device Mockup
  • Dialog
  • Direction
  • Dot Loader
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • File Upload
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kanban
  • Kbd
  • Label
  • Menubar
  • Meter
  • Multi Select
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Password Strength
  • Phone Input
  • Popover
  • Progress
  • Progress Circle
  • Radio Group
  • Rating
  • Resizable
  • Responsive Dialog
  • Rich Text Editor
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Signature
  • Skeleton
  • Slider
  • Sortable
  • Spinner
  • Stat
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Terminal
  • Textarea
  • Time Field
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
  • Typography
  • Video Player
  • Window Mockup
AI
  • Message Scroller
  • Message
  • Bubble
  • Marker
  • Attachment
  • Questionnaire
  • Composer
  • Reasoning
  • Tool Call
  • Approval Card
  • Citations
Blocks
  • Airtable
  • Airtable Kanban
  • ClickUp List
  • ClickUp Kanban
  • Repeatable Group
  • Command Palette
  • Sign In and Sign Up
  • Availability Scheduler
  • AI Chat
  • Action Bar
  • Notion
  • Banking
  • Lineup Builder
  • Sports Score
  • Strava
  • Sheets
  • Notices
  • Settings
  • Billing
Utilities
  • motion
  • sounds
  • scroll-fade
  • shimmer
Another UI. Built on shadcn/ui with Phosphor icons.

Strava

PreviousNext

A workout feed with real route maps and a recorder that tracks a walk, run, ride or hike, built from Another UI primitives.

ML
Maya Lindqvist
Today at 2:15 PM · Garmin Edge 840Cupertino, California

Hills before the bakery

Up through Los Altos Hills while it was still cool, then straight to the bakery for a kouign amann. Legs were heavy on the last climb but the descent made up for it.

Distance
25.95 km
Elev gain
412 m
Time
1h 11m
Achievements
12
TOPRSW
4 gave kudos
TO
Theo Okafor
Today at 7:02 AM · Apple Watch UltraVancouver, British Columbia

Seawall loop, very windy

Headwind the whole way round Stanley Park. Negative split anyway.

Distance
9.42 km
Pace
5:01 /km
Time
47m 12s
Achievements
3
MLLD
2 gave kudos
PR
Priya Raman
Yesterday at 10:40 AMCultus Lake, British Columbia

Teapot Hill with the dog

Found three of the teapots. The dog found all of the mud.

Distance
4.24 km
Pace
18:24 /km
Time
1h 18m
Achievements
1
SWTOML
3 gave kudos
SW
Sam Whitaker
Friday at 5:48 PM · Pixel Watch 3Chilliwack, British Columbia

Vedder dike after work

Distance
10.84 km
Pace
11:25 /km
Time
2h 3m
PR
1 gave kudos
Walk
Time
00:00
Distance (km)
0.00
Avg. pace (/km)
0:00

Installation#

pnpm dlx shadcn@latest add https://anotherui.dev/r/strava.json

Features#

  • Feed. Each workout card shows the athlete, device and place, the title and notes, distance with pace or elevation, time and achievements in a Stat group, and a real map of the route with start and finish markers.
  • Kudos, comments and share. Kudos uses the transitions.dev Like button (the thumb fills, pops and bursts) and pops the count in, comments open inline, and the menu copies a link or hides the workout.
  • Filters. All, Ride, Run, Hike and Walk sit in a Segmented Control in one toolbar row next to Record.
  • Record. Pick a sport, press Start and the recorder follows a real route on the map, drawing your path, with time, distance and pace or speed. Pause, Resume and Finish, then name and save it to the top of the feed, or discard it. The save form is a Responsive Dialog.
  • Real maps. Routes come from OpenStreetMap routing and the map is the Map primitive, adapted from mapcn on MapLibre with CARTO tiles. The athletes are made up.
  • Motion and sound. Feed and recorder slide side by side (transitions.dev), and Cuelume plays on start, pause, save and kudos.

Usage#

import { Strava, SAMPLE_ACTIVITIES } from "@/components/blocks/strava"
<Strava activities={SAMPLE_ACTIVITIES} me="Alex Moreau" speedUp={30} />
Sports ScoreSheets

On This Page

InstallationFeaturesUsage