@unicorn-love/primitives

Foundation package with Tamagui config, design tokens, and base primitives for the Unicorn UI component system.

Installation

pnpm add @unicorn-love/primitives

Usage

Basic Setup

Wrap your application with TamaguiProvider and pass the config:

import { TamaguiProvider } from 'tamagui'
import { config } from '@unicorn-love/primitives'

function App() {
  return (
    <TamaguiProvider config={config}>
      <YourApp />
    </TamaguiProvider>
  )
}

Using Primitives

import { YStack, XStack, Text, Button, styled } from '@unicorn-love/primitives'

function MyComponent() {
  return (
    <YStack gap="$4" padding="$4">
      <Text>Hello World</Text>
      <XStack gap="$2">
        <Button>Primary</Button>
        <Button theme="gray">Secondary</Button>
      </XStack>
    </YStack>
  )
}

Using Design Tokens

import { spacing, fontSize, radius } from '@unicorn-love/primitives/tokens'

// Access individual tokens
console.log(spacing.md) // 16
console.log(fontSize.lg) // 18
console.log(radius.lg) // 16

Creating Custom Components

import { styled, YStack } from '@unicorn-love/primitives'

const Card = styled(YStack, {
  name: 'Card',
  backgroundColor: '$background',
  borderRadius: '$lg',
  padding: '$4',

  variants: {
    elevated: {
      true: {
        shadowColor: '$shadowColor',
        shadowRadius: 10,
        shadowOffset: { width: 0, height: 4 },
      },
    },
  } as const,
})

Exports

Main Exports (@unicorn-love/primitives)

• Primitives: YStack, XStack, ZStack, Stack, Text, Paragraph, Heading, Button
• Utilities: styled, Theme, useTheme, useMedia, AnimatePresence
• Config: config, tamaguiConfig, createTamagui, TamaguiProvider

Tokens (@unicorn-love/primitives/tokens)

• Colors: tealLight, tealDark, grayLight, grayDark, etc.
• Spacing: space, spacing, negativeSpace
• Typography: fonts, fontSize, fontWeight, lineHeight, textStyles
• Shadows: lightShadows, darkShadows, shadowStyles, cardShadows
• Radii: radii, radius, componentRadii
• Sizes: sizes, size, zIndex

Theme (@unicorn-love/primitives/theme)

• Animations: animations, animationDurations
• Media: media, breakpoints, mediaQueryDefaultActive
• Themes: themes

Design Philosophy

This package follows the MECE (Mutually Exclusive, Collectively Exhaustive) principle:

1. Mutually Exclusive: Each token has a single purpose
2. Collectively Exhaustive: All design needs are covered
3. Universal: Works on both web and React Native

License

MIT