tushil-sb-test-ui
v1.2.6
Published
Bundled UI package built from monorepo (for npm publishing)
Readme
tushil-sb-test-ui
Bundled UI components for web and React Native.
Install
This package ships both web and React Native builds.
Web
npm install tushil-sb-test-uiStyle import:
import 'tushil-sb-test-ui/style.css';Then import components from the package root:
import { Button } from 'tushil-sb-test-ui';Web Usage
Import the shipped stylesheet once in your app entry. Web components use theme tokens from the data-theme attribute.
import { Button, ThemeProvider } from 'tushil-sb-test-ui';
export function Example() {
return (
<ThemeProvider theme="light">
<Button label="Continue" variant="primary" size="medium" />
</ThemeProvider>
);
}You can also set the theme without ThemeProvider by adding data-theme to your app root or document root:
<html data-theme="light"></html>document.documentElement.setAttribute('data-theme', 'dark');Supported values are light and dark.
React Native / Expo
npx expo install tushil-sb-test-ui
npx tushil-sb-test-ui setup-native --write
npx expo start -cThen import from the native subpath:
import { Button } from 'tushil-sb-test-ui/native';For a non-Expo React Native app, use npm install tushil-sb-test-ui and make sure NativeWind is configured manually or by running the setup CLI where it matches your project structure.
React Native Usage
Import native components from the native subpath.
import { Button } from 'tushil-sb-test-ui/native';
export function Example() {
return <Button label="Continue" variant="primary" size="medium" />;
}The native package uses NativeWind classes internally. Installing this package installs nativewind, but the consuming Expo / React Native app still needs NativeWind configured in Babel, Metro, and Tailwind.
Native Setup CLI
Run the setup command from the root of the consuming Expo / React Native app.
Dry run:
npx tushil-sb-test-ui setup-nativeApply changes:
npx tushil-sb-test-ui setup-native --write
npx expo start -cThe codemod is explicit and opt-in. It does not run during install.
It can create or patch:
tailwind.config.jsbabel.config.jsmetro.config.jsglobal.css- your app entry, for example
App.tsx,app/_layout.tsx, orsrc/expo/AppEntry.js
It adds NativeWind setup, scans this package's small NativeWind content manifest, imports global.css, and adds the package Tailwind preset for custom classes like bg-primary, text-text-main, and font-Bold.
Manual Native Setup
If you prefer to configure manually, make sure your app has equivalent setup.
tailwind.config.js:
module.exports = {
content: [
'./App.{js,jsx,ts,tsx}',
'./app/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
'./src/**/*.{js,jsx,ts,tsx}',
'./node_modules/tushil-sb-test-ui/nativewind-content.js',
],
presets: [require('nativewind/preset'), require('tushil-sb-test-ui/nativewind-preset')],
theme: {
extend: {},
},
plugins: [],
};babel.config.js:
module.exports = function (api) {
api.cache(true);
return {
presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }]],
};
};metro.config.js:
const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: './global.css' });global.css:
@tailwind base;
@tailwind components;
@tailwind utilities;Import global.css once from your app entry. For example:
import './global.css';If your entry file is nested, use the correct relative path:
import '../../global.css';After changing native config, restart Expo with cache cleared:
npx expo start -cDo not add ./node_modules/tushil-sb-test-ui/dist/native/**/* to Tailwind content. Scanning the compiled bundle can generate a very large NativeWind registry and may crash Hermes with Property storage exceeds 196607 properties.
Exports
import { Button } from 'tushil-sb-test-ui';
import { Button as NativeButton } from 'tushil-sb-test-ui/native';
import 'tushil-sb-test-ui/style.css';