Message Screen

Message Screen is the full-height centred page the 404, 500, Maintenance, Success and Coming Soon routes draw: two corner ornaments, a mark, a heading, a line of copy and one button home. MessageFrame ships beside it for a screen that wants the frame and its own contents.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/message-screen.tsx

Import from@viliha/vui-react/message-screen

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

message-screen-demo.tsx

import { MessageScreen, MessageFrame, MessageBadge } from "@viliha/vui-react/message-screen";

Exports

Everything this family exports. They are read from the source, so this list is what the package actually ships.

Prop	Type	Default
MessageScreen	component	—
MessageFrame	component	—
MessageBadge	component	—

MessageScreen props

Prop	Type	Default	What it does
id	string	—	Distinguishes the two `GridShape` gradients, which are `<defs>` and collide on a shared id.
eyebrow?	string	—	The small tracked line above the mark. Omitted where the reference shows none.
mark	React.ReactNode	—
heading	React.ReactNode	—
body	React.ReactNode	—
cta?	string	"Back to Home Page"
href?	string	"/"
link?	React.ElementType	—	The router's link component. Defaults to `<a>`, which needs no framework.

MessageFrame props

Prop	Type	Default
id	string	—
children	React.ReactNode	—

MessageBadge props

Prop	Type	Default
tone?	string	—
children	React.ReactNode	—

Customize

Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.