Primitives 🏗

UI primitives with predictable, unopinionated defaults and HTML-based semantics for scalable application architecture

Install

npm i @jaak/primitives

Usage

import { Text } from '@jaak/primitives'

const Component = () => (
  <Text>Hello primitives!</Text>
)

Composition

Primitives can be extended at application-level and composed into React components.

import { Button, Text, View } from '@jaak/primitives'

// Enhance primitives with custom attributes
const PrimaryButton = styled(Button)`
  box-shadow: ${({ boxShadow }) => boxShadow};
`

// Compose library and application-level primitives
const Component = () => (
  <View>
    <Text color='primary'>
      I 💖 Primitives!
    </Text>

    <AnchorButton>
      I want to be an ⚓️
    </AnchorButton>

    <PrimaryButton boxShadow='4px 2px 4px black'>
      🏗
    </PrimaryButton>
  </View>
)

Theming

Generate a theme that can be used with styled-components <ThemeProvider>:

import { theme } from '@jaak/primitives'
import { ThemeProvider } from 'styled-components'

// Theme values can be customised - this is optional
const customTheme = {
  palette: {
    primary: '#AAAAAA',
  }
}

const Component = () => (
  <ThemeProvider theme={theme(customTheme)}>
    ...
  </ThemeProvider>
)

Contributing

Preview

npm run styleguide:start

Build

npm run build

Test

npm test