Skip to content

Specialized

Distinct, single-purpose pieces with their own look. Use them as they are or as a starting point.

Installation & usage

npx @youj/cli add app-step-path

Also installs alert, badge, button, card, counter, empty, icon-arrow-right, icon-flame, icon-more-horizontal, progress-path, segmented-meter, skeleton, typography, use-announcer, youj-core, youj-presets, youj-ui-core.

The CLI copies the block to blocks/app/step-path.tsx with every component it uses, so it’s yours to edit.

Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:

stepPath-view.tsx
'use client'

import { StepPath, type StepPathProps } from '@/blocks/app/step-path'

export function StepPathView({ sections, level, week }: Pick<StepPathProps, 'sections' | 'level' | 'week'>) {
  return (
    <StepPath
      sections={sections}
      level={level}
      week={week}
      copy={{ title: 'Spanish' }}
      onOpenStep={(step) => {
        // your code
      }}
      onRetry={() => {
        // your code
      }}
    />
  )
}

Reference

Props19 props, 1 types

Props

StepPath props
PropType
themeThemeInput

Wraps the block in this theme. Default: the theme around it.

–
embeddedboolean

Inside another app: a section named by an h2, without the page around the cards.

default true

true
fillboolean

Take the whole width it's given instead of stopping at its natural width (1088px at 100% scale).

default false

false
copyPartial<StepPathCopy>

Any of the block's strings, to rewrite or translate.

–
localestring

How its dates, times and numbers read (BCP 47). Default: copy.locale, else the app's locale (YoujProvider), else en-US.

–
sectionsProgressPathSection[]

The trail: sections of steps in order.

default demo

demo
currentstring

The step up next.

default the demo's

the demo's
pointsnumber

Points so far.

default 1,240

1,240
stepPointsnumber

Points a finished step earns.

default 20

20
levelStepPathLevel

The level the points are working toward: its number and the points at its start and end.

default level 7, 1,000 to 1,500

level 7, 1,000 to 1,500
goalnumber

Points a day aims for.

default 50

50
formatIntl.NumberFormatOptions

Intl.NumberFormat options for every figure of points. Default: plain numbers in the locale.

–
week(number | null)[]

Points earned each day this week, Monday first; null for days still to come. Today is the last day with a figure.

default the demo's week, with nothing done today

the demo's week, with nothing done today
streaknumber

Days in a row up to yesterday; today adds one once a step is done.

default 12

12
onOpenStep(step: StepPathStep) => void

Called when a step is opened from the trail.

–
loadingboolean

Skeletons in place of the trail and the figures while your course loads.

default false

false
errorstring

Shown in place of the trail when it fails to load, with Retry when onRetry is set.

–
onRetry() => void

Retries after an error.

–
emptyReactNode

Replaces the message when there are no sections. Default: copy.emptyTitle and copy.emptyDescription.

–

StepPathLevel

StepPathLevel props
PropType
numberRequirednumber–
fromRequirednumber–
toRequirednumber–
Strings31 keys for copy

Strings

copy takes any of these keys; the rest keep their defaults. A key whose text holds a value (a count, a name) takes a function.

titlesubtitlemorepathstepspracticecontinuecontinueTofinishedcompletedprogressweeklevelpointstotaltoLeveltoGodailyGoalgoalMetstreakstreakDaysstreakHintstreakKeptthisWeekdayPointsloadingLabelerrorTitleretryemptyTitleemptyDescriptionlocale
Built from10 components