Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen


The basic text primitive for rendering things like paragraphs and headings.

Basic variants

Sancho comes with a number of basic text variants. You should try to stick with these as often as possible.

Basic text
Uppercase variant
Hidden variant

Paragraph variant

Subtitle variant

Lead variant

H6 variant
h5 variant

h4 variant

h3 variant

h2 variant

h1 variant

display3 variant

display2 variant

display1 variant

  <Text>Basic text</Text>
  <Text variant="uppercase">Uppercase variant</Text>
  <Text variant="hidden">Hidden variant</Text>
  <Text variant="paragraph">Paragraph variant</Text>
  <Text variant="subtitle">Subtitle variant</Text>
  <Text variant="lead">Lead variant</Text>
  <Text variant="h6">H6 variant</Text>
  <Text variant="h5">h5 variant</Text>
  <Text variant="h4">h4 variant</Text>
  <Text variant="h3">h3 variant</Text>
  <Text variant="h2">h2 variant</Text>
  <Text variant="h1">h1 variant</Text>
  <Text variant="display3">display3 variant</Text>
  <Text variant="display2">display2 variant</Text>
  <Text variant="display1">display1 variant</Text>

Other options

I will have no margin, and I won't wrap.

  <Text variant="paragraph" gutter={false} wrap={false}>
    I will have no margin, and I won't wrap.


The text style
Use text-overflow: ellipsis styling when set to false
Use muted colors
Set to false to remove any bottom margins