Other

SolutionRow

#MasterUsed in: Wingman 0 · WorkPal 1

Row with a lucide icon + title + description + right-aligned category tag. Used in Overview solution lists.

AI 趋势速报 — 每天 3 分钟音频

针对：AI

Focus Block — 自动拦截非紧急会议

针对：Deadline

SummaryFooter

#MasterUsed in: Wingman 0 · WorkPal 1

Compact elapsed-time or summary line beneath a conversation result.

View source

Requires React 19, ReactDOM 19, TypeScript and lucide-react 1.14.0. Import frame.css once and use a frame-root wrapper; set its background to var(--color-bg-page) and color to var(--color-text-primary), or supply a matching host surface; add dark to an ancestor for dark mode.

Tested with shadcn 4.21.0, React 19.2.5, Vite 8.0.10 and Tailwind 3.4.19 / 4.3.3. Start with a configured React/Vite shadcn app. Files install into src/components/frame; import its frame.css. For manual copy, save the complete component and stylesheet below. Examples leave optional voice features off; retain the MIT license and third-party notices.

Required stylesheet: frame.css

npx shadcn@4.21.0 add https://raw.githubusercontent.com/BeibeiZhang/frame-design-system/main/registry/summary-footer.json

Right-aligned row with clock icon + summary text. Use at the bottom of a section.

Total review time: ~16 min for 3 items

70 of 91 renderable exports have a viewer representation.

Coverage is calculated at build time from shared.tsx exports and explicit viewer sections. New exports appear below until represented or classified as non-visual.

Not yet represented as standalone viewer entries

AvatarMenu · DangerButton · NavToggleIconProvider · RESIZABLE_NAV_DEFAULT_WIDTH · RESIZABLE_NAV_KEYBOARD_STEP · RESIZABLE_NAV_MAX_WIDTH · RESIZABLE_NAV_MIN_WIDTH · UserAvatar · VoiceWaveform · adoptUserEdit · applyFinal · applyPartial · beginDictation · clampWidth · discardDraft · mapPosition · readStoredWidth · settleDraft · useAnchoredAbove · useResizableWidth · writeStoredWidth

Source of truth: packages/design-system/src/shared.tsxTokens: packages/design-system/src/index.css