Vajra UI Core

Layout primitives for React Native.

Why

Raw RN layout is verbose. Design systems fix that but ship a theme, a provider, and a dependency tree you didn't ask for.

Vajra UI Core is neither. It's a thin prop layer over the primitives you're already using — View, Text, TouchableOpacity. The whole thing is 9 kB and pulls in nothing. Drop it in, style with your own system, done.

// before
<View style={{ flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, gap: 8 }}>

// after
<Row align="center" px={16} gap={8}>

Install

yarn add @devraj-labs/vajra-ui-core

react and react-native are peer dependencies. Nothing else is.

Docs

| Component | | |-----------|--| | Box | docs/box | | Row | docs/row | | Col | docs/col | | Center | docs/center | | AbsoluteCenter | docs/absolute-center | | Spacer | docs/spacer | | Separator | docs/separator | | CoreText | docs/core-text | | CoreTextInput | docs/core-text-input | | CorePressable | docs/core-pressable | | Grid | docs/grid | | useDimensions | docs/use-dimensions |

Primitives

Box

Foundation View with shorthand layout and spacing props. Every other layout primitive is built on top of Box.

Full docs →

Row

Box with flexDirection="row" pre-applied. Use it anywhere you need horizontal layout.

Full docs →

Col

Box with flexDirection="column" pre-applied. Stacks children vertically.

Full docs →

Center

Box centered on both axes. No more alignItems + justifyContent boilerplate.

Full docs →

AbsoluteCenter

Fills its parent absolutely and centers children. Perfect for overlays, loaders, and empty states.

Full docs →

Spacer

Fixed-size gap between elements. Drop it between siblings instead of reaching for margin.

Full docs →

Separator

Horizontal or vertical divider line. One prop to switch orientation.

Full docs →

CoreText

Headless Text with typography shorthand props. Bring your own font and color system.

Full docs →

CoreTextInput

Headless TextInput with the same layout and typography props as CoreText.

Full docs →

CorePressable

TouchableOpacity with full layout prop support. Style your buttons without a wrapper View.

Full docs →

Grid

Compound responsive grid — Grid.Root + Grid.Item. Adapts to any screen width automatically.

Full docs →

useDimensions

Screen-aware dimension utilities. Responsive values without a context provider.

Full docs →

Examples

A runnable React Native CLI app lives in examples/app/.

cd examples/app

# iOS
bundle exec pod install --project-directory=ios
npx react-native run-ios

# Android
npx react-native run-android

License

MIT