React Native
Add Vinyl UI to an Expo / React Native app with Uniwind and React Native Reusables.
Native components are built on React Native Reusables primitives
and styled with Uniwind (Tailwind v4 for React Native). Effects use
react-native-reanimated and react-native-svg. Everything runs in Expo Go.
Requirements
React Native 0.81+ (New Architecture), Reanimated 4, react-native-svg 15, Uniwind 1.x and Tailwind CSS 4.
Set up Uniwind
npx expo install uniwind tailwindcss react-native-reanimated react-native-worklets react-native-svgconst { getDefaultConfig } = require('expo/metro-config');
const { withUniwindConfig } = require('uniwind/metro');
module.exports = withUniwindConfig(getDefaultConfig(__dirname), {
cssEntryFile: './global.css',
dtsFile: './uniwind-types.d.ts',
});@import 'tailwindcss';
@import 'uniwind';Import ./global.css from your root component (App.tsx or app/_layout.tsx), not from index.ts.
Configure shadcn for React Native
Create components.json with the @vinyl namespace pointing at the native registry:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"tsx": true,
"tailwind": { "css": "global.css", "baseColor": "neutral", "cssVariables": true },
"aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib" }
}{ "registries": { "@vinyl": "https://vinyl-ui.pages.dev/r/native/{name}.json" }}Make sure @/* resolves in tsconfig.json ("paths": { "@/*": ["./*"] }).
Install the theme
npx shadcn@latest add @vinyl/themeThis adds @import '@vinyl-ui/tokens/native.css'; to global.css, which defines the Night Drive
(dark) and Sun-Faded (light) Uniwind themes.
If global.css already has an @layer theme { :root { @variant … } } block (for example from a
React Native Reusables template), delete it. Otherwise it overrides the Vinyl colours.
Add components
npx shadcn@latest add @vinyl/button @vinyl/card @vinyl/dialogtext, icon, utils and native-only-animated-view come along automatically as dependencies.
Mount the portal host
Dialogs render through @rn-primitives/portal. Add a host once at the root:
import { PortalHost } from '@rn-primitives/portal';
export default function App() {
return (
<>
{/* your app */}
<PortalHost />
</>
);
}Switching themes
Uniwind follows the system appearance by default. To force a theme:
import { Uniwind } from 'uniwind';
Uniwind.setTheme('dark'); // 'light' | 'dark' | 'system'Fonts
Native text uses the platform font unless you load your own. To match the web, load Space Grotesk,
Orbitron and VT323 with expo-font and set font-[Orbitron] (or a custom --font-* theme variable) where you want them.