Components / Brand

TextSizeControl

Text size switch for console apps: Default, Large or Larger, a radio group named Text size. A choice zooms the page at once and is saved per viewer under the same key in every Somnia app. Pair it with themeScript({ textSize: true }) in <head>, and use the viewport utilities for full-height frames (Foundations, Text size).

OriginNew in the system

Import

tsx

import { TextSizeControl, textSizeScript, TEXT_SIZE_KEY, TEXT_SIZES } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { TextSizeControl, textSizeScript, TEXT_SIZE_KEY, TEXT_SIZES } from "@somnia-chain/ui/next"

Examples

Beside the theme toggle

A size picked here zooms this whole site, as it would your app. Default puts it back.

examples/text-size-control/default.tsxShow code

tsx

import { TextSizeControl, ThemeToggle } from "@somnia-chain/ui"

export default function TextSizeControlExample() {
  return (
    <div className="flex items-center gap-3">
      <TextSizeControl />
      <ThemeToggle />
    </div>
  )
}

In the top bar

Topbar's textSize puts the control before the theme toggle.

#428,175,975

examples/text-size-control/topbar.tsxShow code

tsx

import { Topbar } from "@somnia-chain/ui"

export default function TextSizeControlTopbar() {
  return <Topbar textSize status={<span className="font-mono text-[12px] text-fg-3 tabular">#428,175,975</span>} />
}

Props

TextSizeControl

Prop	Type	Default	Description
storageKey	string	"somnia-text-size"	localStorage key.
className	string	—	Added to the group's classes.

textSizeScript(options)

Prop	Type	Default	Description
storageKey	string	"somnia-text-size"	localStorage key. The script puts a saved size on <html> as data-text-size and sets nothing otherwise, which is Default.

Topbar

Prop	Type	Default	Description
textSize	boolean	false	Show TextSizeControl before the theme toggle.