Vajra UI Core

Layout primitives for React Native.

~9 kB	0	0	12
Download size	Dependencies	Providers needed	Primitives

  

---

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