Stareezy UI

App.tsx

TypeScript JSX

function Demo() {
  return (
    <VStack gap={16} style={{ maxWidth: 340 }}>
      <Box bg="#024CCE" p={20} rounded={12}>
        <Text style={{ fontSize: 20, fontWeight: 800, color: '#fff', marginBottom: 6 }}>Hello, Stareezy UI</Text>
        <Text style={{ fontSize: 14, color: 'rgba(255,255,255,0.75)' }}>A fully typed design token system.</Text>
      </Box>
      <HStack gap={8}>
        <Box bg="#E6EDFA" p={12} rounded={8} style={{ flex: 1, textAlign: 'center' }}>
          <Text style={{ fontSize: 12, fontWeight: 600, color: '#024CCE' }}>celurenBlue</Text>
        </Box>
        <Box bg="#F3FFE3" p={12} rounded={8} style={{ flex: 1, textAlign: 'center' }}>
          <Text style={{ fontSize: 12, fontWeight: 600, color: '#4D8D01' }}>lawnGreen</Text>
        </Box>
        <Box bg="#FFE9EC" p={12} rounded={8} style={{ flex: 1, textAlign: 'center' }}>
          <Text style={{ fontSize: 12, fontWeight: 600, color: '#C20219' }}>crimsonRed</Text>
        </Box>
      </HStack>
    </VStack>
  );
}

Viewport

Hello, Stareezy UI

A fully typed design token system.

🌐 Web Preview

◉ Token Inspector

celurenBlue-500

#024CCE

spacing-4

16px

radius-md

8px

rounded

neutral-10

#FFFFFF

color

crimsonRed-500

#F2021F

borderColor

lawnGreen-500

#81EB02

◉ Stareezy UI Playground21 lines

TypeScript JSX✓ Ready