Mise en forme

Stylisez les composants avec les utilitaires className ou des props typées. Les applications Text.js n’ont pas de feuilles de style.

#Utilitaires

className accepte des utilitaires de type Tailwind. Une unité correspond à une cellule.

<Box className="flex-row gap-2 p-1 border rounded">  <Box className="flex-col grow border rounded px-1 bg-surface">    <Text bold>p-1 · gap-2</Text>    <Text color="muted">1 unit = 1 cell</Text>  </Box>  <Box className="flex-col grow border rounded px-1 border-accent">    <Text color="accent">border-accent</Text>  </Box></Box>

#Props typées

Chaque utilitaire possède une prop. Les props ont priorité sur className.

<Box flexDirection="column" padding={1} border="rounded" borderColor="accent">  <Text bold>Typed props</Text></Box>

#Couleurs

Utilisez des valeurs hexadécimales, des noms Tailwind ou des tokens de thème comme fg, muted, surface, accent, success et danger. Les tokens suivent le thème actif.

#Thèmes

Cinq thèmes prédéfinis sont intégrés : geistDark, geistLight, opencodeDark, tokyoNight et amberCrt.

<ThemeProvider theme="amberCrt">  <Box className="border rounded p-1">    <Text color="accent">amberCrt</Text>  </Box></ThemeProvider>

const brand = createTheme({ id: "brand", name: "Brand", accent: "#ffffff" }, "geistDark");

#Zones d’affichage adaptatives

Les applications remplissent par défaut la console DevTools ancrée (viewport.responsive) et se redimensionnent lorsque vous faites glisser le panneau. Organisez le layout avec flex et lisez ses dimensions au besoin :

const { cols } = useViewport();const sidebar = cols >= 90;

La page ne peut voir qu’un panneau ancré. Les DevTools détachés, le zoom des DevTools et la barre latérale de « Console » lui sont invisibles, donc l’application utilise viewport.width × viewport.height (par défaut 120×36) ou les dimensions que vous fixez :

text.resize(120, 36)   // pin a sizetext.responsive(true)  // fit the console again