@butternutbox/pawprint-native

ButternutBox Pawprint Design System - React Native Components

Installation

yarn add @butternutbox/pawprint-native

Usage

Theme Provider

Wrap your app with the PawprintProvider:

import { PawprintProvider } from "@butternutbox/pawprint-native"

function App() {
  return <PawprintProvider>{/* Your app */}</PawprintProvider>
}

Using Tokens

Access design tokens via the usePawprint hook:

import { usePawprint } from "@butternutbox/pawprint-native"

function MyComponent() {
  const tokens = usePawprint()

  // Access tokens
  const buttonColor =
    tokens.components.buttons.filledButton.colour.background.primary.default

  return <View />
}

Styled Components

Use the styled utility for creating styled React Native components:

import { styled } from "@butternutbox/pawprint-native"
import { View } from "react-native"

const StyledView = styled(View)(({ theme }) => ({
  backgroundColor:
    theme.components.buttons.filledButton.colour.background.primary.default,
  padding: 16
}))

Development

# Build the package
yarn build

# Watch mode
yarn dev

# Type check
yarn type:check

# Lint
yarn lint:check