Block
Block is a layout primitive for building styled views.
Source
LLM docs
Package
Examples
2
Properties
79
Basics
Build a card with
bg, p and radius, share a row with grow and a fixed w, and render button-style actions with component, all on Block without custom stylesheets.Loading demo…
import { Block, Text } from '@plocks/ui';
export function Demo() {
return (
<Block w="100%" maw={420}>
<Block bg="#111827" radius="lg" p="lg">
<Text fw="semibold" c="white">
Release summary
</Text>
<Text size="sm" c="rgba(255,255,255,0.75)">
Version 2.4 is live in every region.
</Text>
</Block>
<Block direction="row">
<Block grow bg="#2563eb" radius="md" p="md">
<Text fw="semibold" c="white">
Velocity
</Text>
<Text size="sm" c="rgba(255,255,255,0.8)">
42 points
</Text>
</Block>
<Block w={140} bg="#f9fafb" radius="md" p="md">
<Text fw="semibold">Backlog</Text>
<Text size="sm" c="muted">
18 items
</Text>
</Block>
</Block>
<Block direction="row">
<Block component="button" bg="#2563eb" radius="md" px="lg" py="sm">
<Text c="white" fw="semibold">
Create project
</Text>
</Block>
<Block
component="button"
radius="md"
px="lg"
py="sm"
borderWidth={1}
borderColor="#2563eb"
>
<Text c="#2563eb" fw="semibold">
View roadmap
</Text>
</Block>
</Block>
</Block>
);
}bg shorthand
bg resolves through the theme. Pass a palette name ('primary', 'success') for a subtle tint (shade-1), a 'palette.shade' like 'primary.6' for a specific shade, a theme-background key ('surface', 'subtle', 'elevated'), or any CSS color string. The same resolver powers <Card bg=...>.Loading demo…
import { Block, Row, Text } from '@plocks/ui';
export function Demo() {
return (
<Row gap="sm" wrap="wrap">
<Block bg="primary" p="sm" radius="md">
<Text>primary</Text>
</Block>
<Block bg="success" p="sm" radius="md">
<Text>success</Text>
</Block>
<Block bg="warning" p="sm" radius="md">
<Text>warning</Text>
</Block>
<Block bg="error" p="sm" radius="md">
<Text>error</Text>
</Block>
<Block bg="primary.6" p="sm" radius="md">
<Text c="white">primary.6</Text>
</Block>
<Block bg="gray.2" p="sm" radius="md">
<Text>gray.2</Text>
</Block>
<Block bg="surface" p="sm" radius="md" borderWidth={1} borderColor="#ddd">
<Text>surface</Text>
</Block>
<Block bg="subtle" p="sm" radius="md">
<Text>subtle</Text>
</Block>
<Block bg="#a855f7" p="sm" radius="md">
<Text c="white">#a855f7</Text>
</Block>
</Row>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources