skiddie

Installation

Add skiddie to an Expo or bare React Native project.

Pre-release

skiddie is being built. Commands and APIs on this page are the planned design and may change before v0.1.

Requirements

  • Expo SDK 57+ (React Native 0.86+). Older SDKs will likely work but are not tested yet.
  • NativeWind v4 with Tailwind CSS 3.4. If you don't have it yet, skiddie init offers to set it up. NativeWind v5 isn't supported yet.

1. Initialize

npx skiddie@latest init

init detects Expo or bare React Native and your package manager, asks where components should go (default @/components/skiddie) and which haptics and blur adapters you want, then:

  • writes skiddie.json,
  • copies the shared core/ folder (tokens, Tailwind preset, cn, theme, adapters, accessibility helpers),
  • adds the skiddie preset and folder to your tailwind.config.js (see below),
  • installs the peer dependencies with npx expo install on Expo, or your package manager otherwise.

2. Peer dependencies

PackageWhy
react-native-reanimated + react-native-workletsUI-thread animation
react-native-gesture-handlerGestures
react-native-safe-area-contextSafe areas
react-native-svgShapes and indicators
nativewind (v4) + tailwindcss (3.4)Styling
clsx + tailwind-merge (v2)Merging your classes with the defaults

Some components add optional ones (expo-haptics, expo-blur, expo-glass-effect). Their pages list them.

3. Tailwind config

init makes these two changes. If you set things up by hand, make sure both are there, or the components render unstyled:

tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,jsx,ts,tsx}',
    './components/skiddie/**/*.{js,jsx,ts,tsx}', 
  ],
  presets: [
    require('nativewind/preset'),
    require('./components/skiddie/core/tailwind-preset'), 
  ],
};

Using pnpm?

Add react-native-css-interop as a direct dependency, at the same version nativewind uses. NativeWind's Babel transform imports it from your app code, and pnpm only exposes direct dependencies.

4. Add a component

npx skiddie@latest add floating-tab-bar