simonghales / jsxui

Primitive elements to build isomorphic user interfaces in React.

⚠️ Currently under development, not ready for use yet

This library is currently unstable and the API is in flux. It is being worked on in the open for better exposure, please feel free to file an issue if you have any questions or suggestions. As of right now, packages aren't published yet and documentation may be lacking or stale.

A set of primitive elements to help build cross-platform user interfaces in React.

Example

import React from 'react'
import { Overrides, Stack, Text, Tokens } from '@jsxui/react'

const tokens = {
  fontFamilies: {
    body: 'Muli',
  },
  fontSizes: {
    xsmall: 12,
    small: 14,
    medium: 16,
    large: 22,
    xlarge: 32,
  },
  fontWeights: {
    light: '300',
    medium: '400',
    bold: '700',
  },
  colors: {
    background: '#083cb6',
    foreground: 'white',
  },
}

const overrides = [
  <Text family="body" size="medium" weight="light" color="foreground" />,
]

export default () => {
  return (
    <Tokens {...tokens}>
      <Overrides value={overrides}>
        <Stack space="1fr">
          <Text>JSX UI</Text>
        </Stack>
      </Overrides>
    </Tokens>
  )
}