Quarterly goals with owner, status and progress. Check in opens a goal with a key result, status and a note.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/goals-check-inPlayground
Company goals
Week 4 of 13 · 53% overall
Q4 2026
Default
Company goals
Week 4 of 13 · 53% overall
Q4 2026
Check-in
Company goals
Week 4 of 13 · 53% overall
Q4 2026
- Payment success rate at 98.5%Target 98.5%52% → 83%
Icons animation
Check-in
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/goals-check-in
Accessibility
- Goals are disclosure buttons with aria-expanded.
- Status has an icon and a word, never colour alone.
- Each bar is labelled with its goal.
Motion
- The panel fades and rises 8 px over 400 ms, and rows fade in 40 ms apart.
- The chevron turns in 240 ms and the check-in fades in.
- With reduced motion, it only fades.
Responsive behavior
- 580 px on Web and 358 px on Mobile, with touch sized controls.
Performance
- Only the open goal renders its panel, Inputs and Tabs.
- Rows use CSS for the stagger. Motion runs only when a panel opens.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import GoalsCheckIn and the Goal type. Props: title, summary, periods, goals, due, defaultChecking, onSave, onPeriodChange, animated.
- onSave receives { id, value, status, note } and closes the panel. The component does not change goals: update them yourself.
- onPeriodChange reports the period. Swap goals for it in your own state.
- It composes Avatar, Progress, Input, Tabs, Button and Icon Button.
Related
ProgressComponentShows how far a task has come, with states for done, paused, failed and unknown length, plus nine recipes.TabsComponentSwitch between views of the same thing. Panels swipe with the finger and the indicator follows.InputComponentThe single line text control: a pill on the tray fill that lifts onto the surface when focused.Metric CardComponentOne number with its trend, a period switch, and the segments behind it.AvatarComponentA person or workspace as an illustrated photo, initials or an icon, with presence, a story ring and overlapping groups.