Stravinsky UI

A modern React Native UI library built with TypeScript.

Installation

npm install stravinsky
# or
yarn add stravinsky

Usage

Import the components you need from the library:

import { Button, Card, Text } from 'stravinsky';

Button

A customizable button component with multiple variants and sizes.

import { Button } from 'stravinsky';

// Basic usage
<Button title="Click me" onPress={() => console.log('Pressed!')} />

// With variants
<Button title="Primary" variant="primary" />
<Button title="Secondary" variant="secondary" />
<Button title="Outline" variant="outline" />

// With sizes
<Button title="Small" size="small" />
<Button title="Medium" size="medium" />
<Button title="Large" size="large" />

// Disabled state
<Button title="Disabled" disabled />

Props

• title (string, required): The text to display in the button
• variant ('primary' | 'secondary' | 'outline', default: 'primary'): Button style variant
• size ('small' | 'medium' | 'large', default: 'medium'): Button size
• disabled (boolean, default: false): Whether the button is disabled
• style (ViewStyle): Custom styles for the button container
• textStyle (TextStyle): Custom styles for the button text
• All other TouchableOpacity props are supported

Card

A flexible container component with elevation and styling options.

import { Card, Text } from 'stravinsky';

<Card>
  <Text>Card content goes here</Text>
</Card>

// With variants
<Card variant="elevated">
  <Text>Elevated card</Text>
</Card>

<Card variant="outlined">
  <Text>Outlined card</Text>
</Card>

<Card variant="filled">
  <Text>Filled card</Text>
</Card>

// Custom padding
<Card padding={24}>
  <Text>Card with custom padding</Text>
</Card>

Props

• children (React.ReactNode, required): The content to display inside the card
• variant ('elevated' | 'outlined' | 'filled', default: 'elevated'): Card style variant
• padding (number, default: 16): Internal padding of the card
• style (ViewStyle): Custom styles for the card
• All other View props are supported

Text

A typography component with predefined styles and customization options.

import { Text } from 'stravinsky';

// Basic usage
<Text>Hello, world!</Text>

// With variants
<Text variant="heading1">Main Heading</Text>
<Text variant="heading2">Sub Heading</Text>
<Text variant="body">Body text</Text>
<Text variant="caption">Caption text</Text>

// With weights
<Text weight="bold">Bold text</Text>
<Text weight="semibold">Semibold text</Text>

// With alignment
<Text align="center">Centered text</Text>
<Text align="right">Right-aligned text</Text>

// With custom color
<Text color="#FF0000">Red text</Text>

Props

• children (React.ReactNode): The text content to display
• variant ('body' | 'caption' | 'heading1' | 'heading2' | 'heading3' | 'subtitle', default: 'body'): Typography variant
• color (string): Text color
• weight ('normal' | 'medium' | 'semibold' | 'bold', default: 'normal'): Font weight
• align ('left' | 'center' | 'right', default: 'left'): Text alignment
• style (TextStyle): Custom styles for the text
• All other Text props are supported

Development

Building

npm run build

Testing

npm test

Linting

npm run lint
npm run lint:fix

License

MIT © Josh Stovall