Layout Components

Components for structuring your app pages.

Page

The top-level wrapper for app pages. Provides a consistent page structure with title, subtitle, and actions.

import { Page, Button } from "@qumra/manara";

function ProductsPage() {
  return (
    <Page
      title="Products"
      subtitle="Manage your store products"
      primaryAction={<Button variant="primary">Add Product</Button>}
    >
      {/* Page content */}
    </Page>
  );
}

Props

Prop	Type	Description
title	string	Page title displayed at the top.
subtitle	string	Optional subtitle below the title.
primaryAction	ReactNode	Primary action button in the header.
secondaryActions	ReactNode	Secondary action buttons.
children	ReactNode	Page content.

---

Layout

A section-based layout component for creating multi-column pages.

import { Layout, Card, Text } from "@qumra/manara";

function SettingsPage() {
  return (
    <Layout>
      <Layout.Section>
        <Card>
          <Text variant="headingMd">General Settings</Text>
          {/* Main content - takes more space */}
        </Card>
      </Layout.Section>

      <Layout.Section secondary>
        <Card>
          <Text variant="headingMd">Summary</Text>
          {/* Sidebar content - smaller width */}
        </Card>
      </Layout.Section>
    </Layout>
  );
}

Layout.Section Props

Prop	Type	Default	Description
secondary	boolean	false	Render as a narrower sidebar section.
children	ReactNode	--	Section content.

---

Card

A container component for grouping related content.

import { Card, Text, Button } from "@qumra/manara";

// Basic card
<Card>
  <Text>Card content</Text>
</Card>

// Card with title
<Card title="Order Details">
  <Text>Order #1234 was placed on Jan 15.</Text>
</Card>

// Card with sections
<Card title="Product Info">
  <Card.Section>
    <Text>Section 1 content</Text>
  </Card.Section>
  <Card.Section>
    <Text>Section 2 content</Text>
  </Card.Section>
</Card>

Props

Prop	Type	Description
title	string	Optional card header title.
children	ReactNode	Card content.

---

Box

A generic container with padding and spacing control.

import { Box, Text } from "@qumra/manara";

<Box padding="md" background="surface">
  <Text>Padded content with background</Text>
</Box>

Props

Prop	Type	Description
padding	"xs" | "sm" | "md" | "lg" | "xl"	Inner padding.
background	string	Background color token.
children	ReactNode	Box content.

---

InlineStack

Arrange items horizontally with consistent spacing.

import { InlineStack, Button } from "@qumra/manara";

<InlineStack gap="sm">
  <Button variant="primary">Save</Button>
  <Button>Cancel</Button>
</InlineStack>

<InlineStack gap="md" align="center">
  <Text>Label</Text>
  <Badge>Active</Badge>
</InlineStack>

Props

Prop	Type	Default	Description
gap	"xs" | "sm" | "md" | "lg" | "xl"	"md"	Space between items.
align	"start" | "center" | "end"	"start"	Vertical alignment.
wrap	boolean	true	Whether items wrap to next line.
children	ReactNode	--	Stack items.

---

BlockStack

Arrange items vertically with consistent spacing.

import { BlockStack, Text, TextField } from "@qumra/manara";

<BlockStack gap="md">
  <Text variant="headingMd">Contact Information</Text>
  <TextField label="Name" />
  <TextField label="Email" type="email" />
  <TextField label="Phone" type="tel" />
</BlockStack>

Props

Prop	Type	Default	Description
gap	"xs" | "sm" | "md" | "lg" | "xl"	"md"	Space between items.
align	"start" | "center" | "end"	"start"	Horizontal alignment.
children	ReactNode	--	Stack items.