Skip to main content

Add only the components you need

Install the package to get the CLI. Components you select are copied into your app as editable source code; they do not depend on the library at runtime.

Install the CLI​

npm i midestic-rn-library

Check the component list​

npx midestic-rn-library list

Initialize the design tokens​

npx midestic-rn-library init

This creates midestic-rn-library.preset.js in your project. Add it to your Tailwind config and make sure Tailwind scans your app's source:

// tailwind.config.js
module.exports = {
  presets: [require("./midestic-rn-library.preset")],
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

If your app uses a different source directory, tell the add command with --src-dir and use the same path in Tailwind's content globs.

Add a component​

npx midestic-rn-library add button

The CLI copies the button and its local helper files into src/. Add more components by name:

npx midestic-rn-library add input themed-view

Files keep their original folder structure, so import directly from your app:

import { Button } from "./src/components/ui/button";

The CLI reports any external packages the selected components need. Install those dependencies before using the components. For example, the button uses class-variance-authority, clsx, and tailwind-merge.

Use --src-dir app to copy into a different source directory. Existing files are never overwritten unless you explicitly pass --overwrite.

Configure NativeWind​

The components use NativeWind v4 className styles. Install and configure NativeWind in your app:

npm install nativewind tailwindcss

The CLI reports native packages required by the components you selected. For Expo apps, install only those packages with SDK-compatible versions. For example, draggable-drawer requires gesture handler and Reanimated:

npx expo install react-native-gesture-handler react-native-reanimated

If your app uses Reanimated 4, install its Worklets peer as well:

npx expo install react-native-worklets

The icons set requires react-native-svg; safe-area components require react-native-safe-area-context.

Babel​

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"],
  };
};

Metro​

// 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​

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Import the stylesheet from your app entry point:

import "./global.css";

Gesture-driven components such as draggable-drawer also need a gesture root:

import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  return <GestureHandlerRootView style={{ flex: 1 }}>{/* Your app screens */}</GestureHandlerRootView>;
}

Check the result​

import { Button } from "./src/components/ui/button";

export function Example() {
  return <Button title="It works" onPress={() => {}} />;
}