Typography

1"use client";2
3import { Typography } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({7  column: { display: "flex", flexDirection: "column", gap: 16, maxWidth: 576 },8});9
10export function Default() {11  return (12    <div {...stylex.props(styles.column)}>13      <Typography type="h1">Build better interfaces</Typography>14      <Typography type="h2">Typography that stays semantic</Typography>15      <Typography type="h3">Composable by default</Typography>16      <Typography type="h4">Small heading</Typography>17      <Typography>18        Lenso UI Typography provides semantic typography types and native element composition.19      </Typography>20      <Typography color="muted" type="body-sm">21        Smaller muted body copy for secondary descriptions.22      </Typography>23      <Typography type="code">pnpm add @lenso/ui</Typography>24    </div>25  );26}

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Typography } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const scale = [6  { label: "h1", meta: "36px / 600 / 1.11 / tight", sample: "Build better interfaces", type: "h1" },7  {8    label: "h2",9    meta: "30px / 600 / 1.17 / tight",10    sample: "Built for the intelligence age",11    type: "h2",12  },13  { label: "h3", meta: "24px / 600 / 1.25 / tight", sample: "Pricing on your terms", type: "h3" },14  {15    label: "h4",16    meta: "20px / 600 / 1.33 / tight",17    sample: "Apply to the startup program",18    type: "h4",19  },20  { label: "h5", meta: "18px / 600 / 1.39 / tight", sample: "Card titles", type: "h5" },21  { label: "h6", meta: "16px / 600 / 1.50 / tight", sample: "Smaller feature headers", type: "h6" },22  {23    label: "body",24    meta: "16px / 400 / 1.75",25    sample: "Primary body text used across documentation, marketing copy, and descriptions.",26    type: "body",27  },28  {29    label: "body-sm",30    meta: "14px / 400 / 1.50",31    sample: "Secondary body, table cells, navigation, and sidebar items.",32    type: "body-sm",33  },34  {35    label: "body-xs",36    meta: "12px / 400 / 1.25",37    sample: "Captions, badges, helper text, and fine print.",38    type: "body-xs",39  },40  { label: "code", meta: "14px / mono", sample: "pnpm add @lenso/ui", type: "code" },41] as const;42const styles = stylex.create({43  column: { display: "flex", width: "100%", flexDirection: "column" },44  row: {45    display: "grid",46    gridTemplateColumns: "160px 1fr",47    alignItems: "center",48    gap: 32,49    paddingBlock: 20,50    borderBlockEndWidth: { default: 1, ":last-child": 0 },51    borderBlockEndStyle: "solid",52    borderBlockEndColor: "var(--border)",53  },54  caption: { display: "flex", flexShrink: 0, flexDirection: "column", gap: 2 },55  label: { fontSize: 14, lineHeight: "20px", fontWeight: 600, color: "var(--foreground)" },56  meta: { fontSize: 12, lineHeight: "16px", whiteSpace: "nowrap", color: "var(--muted)" },57});58export function TypographyScale() {59  return (60    <div {...stylex.props(styles.column)}>61      {scale.map((row) => (62        <div key={row.label} {...stylex.props(styles.row)}>63          <div {...stylex.props(styles.caption)}>64            <span {...stylex.props(styles.label)}>{row.label}</span>65            <span {...stylex.props(styles.meta)}>{row.meta}</span>66          </div>67          <Typography type={row.type}>{row.sample}</Typography>68        </div>69      ))}70    </div>71  );72}73export default TypographyScale;

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Typography } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  column: { display: "flex", maxWidth: 576, flexDirection: "column", gap: 16 },7});8export function Primitives() {9  return (10    <div {...stylex.props(styles.column)}>11      <Typography.Heading level={1}>Dashboard</Typography.Heading>12      <Typography.Paragraph>13        Convenience primitives are thin wrappers over Typography, so you can choose explicit14        composition without learning a second styling system.15      </Typography.Paragraph>16      <Typography.Paragraph color="muted" size="sm">17        Paragraph supports base, sm, and xs sizes.18      </Typography.Paragraph>19      <Typography.Code>Typography.Code</Typography.Code>20    </div>21  );22}23export default Primitives;

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Typography } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  column: { display: "flex", maxWidth: 576, flexDirection: "column", gap: 12 },7});8export function Prose() {9  return (10    <Typography.Prose xstyle={styles.column}>11      <h1>Prose title</h1>12      <p>13        Prose is for authored content where the markup is already semantic and Lenso UI applies the14        default typography rhythm.15      </p>16      <h2>Section title</h2>17      <p>18        Inline code like <code>render</code> receives the same code treatment as the Typography19        primitive.20      </p>21    </Typography.Prose>22  );23}24export default Prose;

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0); uses native Base UI render props.3import { Typography } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  column: { display: "flex", maxWidth: 576, flexDirection: "column", gap: 16 },7});8export function RenderProps() {9  return (10    <div {...stylex.props(styles.column)}>11      <Typography12        render={({ children, ...domProps }) => <h2 {...domProps}>{children}</h2>}13        type="h1"14      >15        H1 visual style, h2 semantic element16      </Typography>17      <Typography render={({ children, ...domProps }) => <span {...domProps}>{children}</span>}>18        The render prop can swap the underlying element while preserving Lenso UI props and styles.19      </Typography>20    </div>21  );22}23export default RenderProps;

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Typography } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  panel: {7    display: "flex",8    maxWidth: 448,9    flexDirection: "column",10    gap: 8,11    borderRadius: "var(--radius-xl)",12    border: "1px solid color-mix(in oklab, var(--border) 80%, transparent)",13    backgroundColor: "var(--surface-secondary)",14    padding: 16,15  },16  category: {17    fontSize: 12,18    fontWeight: 500,19    letterSpacing: ".025em",20    color: "var(--accent)",21    textTransform: "uppercase",22  },23  title: { fontWeight: 600, letterSpacing: "-.025em", color: "var(--foreground)" },24  text: { fontSize: 14, lineHeight: 1.625, color: "var(--muted)" },25});26export function CustomStyles() {27  return (28    <div {...stylex.props(styles.panel)}>29      <Typography xstyle={styles.category} type="body-xs">30        Changelog31      </Typography>32      <Typography xstyle={styles.title} type="h4">33        Faster search results34      </Typography>35      <Typography xstyle={styles.text} type="body-sm">36        Queries now return in under 200ms thanks to an improved index.37      </Typography>38    </div>39  );40}41export default CustomStyles;