Getting Started
To get started with this project, please follow the steps below:
1. Install Medway UI library and Icons
First of all, you need to install the @medway-ui/core and @medway-ui/icons libraries in your project. You can install it by running in your project root:
yarn add @medway-ui/core @medway-ui/icons2. Install Tailwind CSS v3
Make sure you have Tailwind CSS version 3 installed in your project. You can install it by running:
yarn add -D tailwindcss@3 tailwindcss-animate3. Create a tailwind configuration file
Create a tailwind.config.ts (if you don’t have one) file in your project root. This file will be used to configure the Tailwind and insure that the Medway UI components are available in your project.
import type { Config } from "tailwindcss";
import animate from "tailwindcss-animate";
import {
animation,
borderRadius,
boxShadow,
colors,
container,
content,
fontFamily,
fontSize,
fontWeight,
keyframes,
lineHeight,
screens,
} from "@medway-ui/core/tokens";
const config: Config = {
darkMode: ["class"],
content: [...content],
theme: {
extend: {
colors: {
...colors,
},
fontFamily: {
...fontFamily,
},
fontSize: {
...fontSize,
},
fontWeight: {
...fontWeight,
},
lineHeight: {
...lineHeight,
},
borderRadius: {
...borderRadius,
},
container: {
center: true,
screens: {
...container,
},
},
boxShadow: {
...boxShadow,
},
keyframes: {
...keyframes,
},
animation: {
...animation,
},
},
screens: {
...screens,
},
},
plugins: [animate],
};
export default config;4. Configure your global styles
Ensure you have a globals.css or similar file in your project. Inside this file, add the following import at the top:
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "@medway-ui/core/tokens.css";This will include the design tokens required for the project.
Then add the following code to your globals.css file or customize it as you need:
@layer base {
* {
@apply box-border border-gray-stroke-muted;
}
body {
@apply h-full overflow-x-hidden bg-background text-foreground antialiased;
}
main {
@apply mx-auto h-full w-full max-w-screen-mobile px-4 py-12 desktop:max-w-screen-desktop desktop:px-8 tablet:max-w-screen-tablet tablet:px-6;
}
}5. Use Montserrat as your main font
Ensure you have Montserrat as your main font. You can add it to your global layout like this if you’re using Next.js:
import { Montserrat } from "next/font/google";
const mainFontFamily = Montserrat({
weight: ["400", "500", "600", "700"],
style: ["normal", "italic"],
subsets: ["latin"],
display: "swap",
variable: "--font-montserrat",
});
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="pt-BR" dir="ltr" suppressHydrationWarning>
<body className={`${mainFontFamily.variable}`}>
{children}
</body>
</html>
);
}React Native (Expo)
For mobile apps, use the @medway-ui/native package. It exposes the same component API as @medway-ui/core, built on top of NativeWind and @rn-primitives.
Two setup modes are available depending on whether you are starting a new app or integrating into an existing one.
Brownfield (existing app)
Use this mode when your app already has its own styling system (e.g. Restyle, styled-components). NativeWind is scoped exclusively to @medway-ui/native components and to screens under src/pages/medway-ui/ — the rest of the app is untouched.
1. Install dependencies
npm install @medway-ui/native @medway-ui/core nativewind tailwindcss clsx tailwind-merge class-variance-authority
npx expo install react-native-reanimated react-native-svg @react-native-community/datetimepicker2. metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const { withMedwayUi } = require("@medway-ui/native/metro");
const config = getDefaultConfig(__dirname);
module.exports = withMedwayUi(config, { projectRoot: __dirname });3. tailwind.config.js
const path = require("path");
const { createMedwayUiTailwindConfig } = require("@medway-ui/native/tailwind");
module.exports = createMedwayUiTailwindConfig({
projectRoot: __dirname,
content: [path.join(__dirname, "src/pages/medway-ui/**/*.{js,jsx,ts,tsx}")],
});4. babel.config.js
Keep your existing plugins and add the brownfield override. It scopes NativeWind only to the lib and to src/pages/medway-ui/**.
const { createBrownfieldOverride } = require("@medway-ui/native/babel-brownfield");
module.exports = function (api) {
api.cache(true);
const plugins = [
/* your existing plugins — module-resolver, dotenv, etc. */
];
return {
presets: ["babel-preset-expo"],
plugins,
overrides: [createBrownfieldOverride({ plugins })],
};
};5. global.css
Create this file at the project root. Tokens come directly from @medway-ui/core.
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "@medway-ui/core/tokens.css";Greenfield (new app)
Use this mode when NativeWind can be configured globally across the entire app.
1. Install dependencies
npm install @medway-ui/native @medway-ui/core nativewind tailwindcss clsx tailwind-merge class-variance-authority
npx expo install react-native-reanimated react-native-svg @react-native-community/datetimepicker2. tailwind.config.js
const { createMedwayUiTailwindConfig } = require("@medway-ui/native/tailwind");
module.exports = createMedwayUiTailwindConfig({
projectRoot: __dirname,
content: [
"./app/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
],
});3. babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
"nativewind/babel",
],
};
};4. 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" });5. global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "@medway-ui/core/tokens.css";After either setup, import components the same way as on web:
import { Button, Input, Alert, Badge } from "@medway-ui/native";