← All Projects

Vajra UI Core

2026 · personal · open source

Zero dependency headless layout primitives for React Native, the foundation Vajra UI is built on.

Vajra UI Core
Tech Stack
React NativeTypeScript
Docs ↗GitHub ↗npm ↗

Vajra UI Core is a headless layout primitives package for React Native, published under my Devraj Labs org. It is around 9 kB, has zero runtime dependencies, and needs no provider.

The problem

Raw React Native layout is verbose. Design systems fix that but ship a theme, a provider and a dependency tree you did not ask for. Building layout by hand means wrapping View, Text and TouchableOpacity with the same flexbox boilerplate over and over.

What it gives you

A thin prop layer over the primitives you are already using:

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

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

12 headless primitives that wrap the native View, Text and TouchableOpacity with shorthand props:

  • Box. Foundation View with shorthand layout and spacing props. Every other layout primitive is built on top of Box.
  • Row. Box with flexDirection="row" pre applied, for horizontal layout.
  • Col. Box with flexDirection="column" pre applied, stacks children vertically.
  • Center. Box centered on both axes, no more alignItems plus justifyContent boilerplate.
  • AbsoluteCenter. Fills its parent absolutely and centers children, for overlays, loaders and empty states.
  • Spacer. Fixed size gap between elements, dropped between siblings instead of reaching for margin.
  • Separator. Horizontal or vertical divider line, one prop to switch orientation.
  • CoreText. Headless Text with typography shorthand props, bring your own font and color system.
  • CoreTextInput. Headless TextInput with the same layout and typography props as CoreText.
  • CorePressable. TouchableOpacity with full layout prop support, style buttons without a wrapper View.
  • Grid. Compound responsive grid, Grid.Root plus Grid.Item, adapts to any screen width automatically.
  • useDimensions. Screen aware dimension utilities, responsive values without a context provider.

Install

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

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

Examples

A runnable React Native CLI app ships in the repo's examples/app/ folder, the source of the screenshots below.

Built for Vajra UI

Core is the foundation Vajra UI, my token driven, themeable component library, is built on top of. Core works standalone for anyone who just wants the layout shorthand without theming.

Status

Published on npm at v2.3.0.

Install

npm install @devraj-labs/vajra-ui-core

Docs

devraj-labs.github.io/vajra-ui-core

Screenshots

Vajra UI Core promotional banner showing example screens built with Box, Row and Col primitives

Box primitive example showing a dashboard screen built with shorthand layout props Row primitive example arranging elements in a horizontal flex layout Col primitive example arranging elements in a vertical flex layout Center primitive example centering content within its container AbsoluteCenter primitive example overlaying centered content on a screen Grid primitive example laying out a discover screen in a responsive grid CoreText primitive example showing styled text shorthand props CoreTextInput primitive example showing a styled text input field CorePressable primitive example showing a styled pressable button Separator primitive example showing a dividing line between sections Spacer primitive example showing flexible spacing between elements useDimensions hook example showing responsive layout values