msb-shared

A modern UI component library for React and React Native.

Installation

npm install msb-shared

Structure

Components are organized by topic:

• ui/<topic>/web: React (web) components
• ui/<topic>/native: React Native components
• ui/<topic>/utils: Shared utilities and types

Usage

Usage (Web & Native)

The library uses conditional exports. You use the same import path for both platforms, and your bundler (Vite, Metro, etc.) will automatically pick the correct version:

import { PriceIndicator } from 'msb-shared/ui/price-indicator';

function App() {
  return (
    <PriceIndicator 
      price={1342}
      minPrice={475}
      maxPrice={2181}
    />
  );
}

Note: React Native projects still require react-native-svg as a peer dependency.

Components

PriceIndicator

A horizontal chip showing a red-to-green gradient with a position indicator.

Props:

• value (required): Position percentage (0-100). 0 = red/expensive, 100 = green/cheap
• width: Width in pixels (default: 200)
• height: Height in pixels (default: 32)
• label: Optional label below the indicator
• gradientColors: Custom gradient colors [left, middle, right]
• indicatorColor: Color of the position marker
• showValue: Show percentage on the indicator

Development

# Install dependencies
npm install

# Build the library
npm run build

# Run example
cd example && npm install && npm run dev

License

MIT