View

The base box. Flexbox/Grid layout, styling and events for anything you render.

ViewProps packages/core/src/components/layout.ts:27 ↗

Import

import { View } from "@tarve/core";

Usage

View.tsx

import { Text, View, theme } from "@tarve/core";

<View
  padding={16}
  style={{
    background: theme.colors.card,
    borderWidth: 1,
    borderColor: theme.colors.border,
    radius: 12,
    boxShadow: { y: 8, blur: 24, color: "#0f172a22" },
  }}
>
  <Text>Any content goes here.</Text>
</View>

Props

Prop	Type	Default
`align`	`Style["align"]`	—
`dismissOnOutside`	`boolean`	—
`dragRegion`	`boolean`	—
`flex`	`number`	—
`focusable`	`boolean`	—
`gap`	`number`	—
`justify`	`Style["justify"]`	—
`onOutsideClick`	`() => void`	—
`padding`	`Style["padding"]`	—
`portal`	`boolean`	—
`windowAction`	`"minimize" \| "toggleMaximize" \| "close"`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle