UI Components (@qumra/manara)

Manara is the official design system and component library for Qumra apps. It provides ready-to-use React components that match the Qumra Admin panel look and feel.

Installation

npm

npm install @qumra/manara

pnpm

pnpm install @qumra/manara

Yarn

yarn add @qumra/manara

Setup

Import the stylesheet in your root layout:

app/root.tsx

import "@qumra/manara/styles.css";

Quick Example

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

function Dashboard() {
  return (
    <Page title="Dashboard">
      <Card>
        <Text variant="headingMd">Welcome to your app</Text>
        <Text>Manage your store settings and products from here.</Text>
        <InlineStack gap="sm">
          <Button variant="primary">Get Started</Button>
          <Button>Learn More</Button>
        </InlineStack>
      </Card>
    </Page>
  );
}

Component Categories

Layout

Components for structuring your page layout.

Component	Description
Page	Top-level page wrapper with title and actions.
Layout	Section-based layout with primary and secondary columns.
Card	Content container with optional title and sections.
Box	Generic container with spacing and padding control.
InlineStack	Horizontal stack with configurable gap.
BlockStack	Vertical stack with configurable gap.

Forms

Components for user input and actions.

Component	Description
Button	Action button with variants, tones, and loading state.
TextField	Text input with label, help text, and validation.
Select	Dropdown select input.

Display

Components for presenting data and feedback.

Component	Description
Text	Typography component with variants and tones.
Badge	Small status indicator label.
Banner	Prominent message banner with tone.
Spinner	Loading spinner indicator.
DataTable	Table for displaying structured data.
Modal	Dialog overlay for focused content.
Toast	Brief notification message.

Design Tokens

Manara exports design tokens for consistent styling:

import { colors, spacing, fontFamily, fontSize, fontWeight } from "@qumra/manara";

Token	Examples
colors	colors.primary, colors.text, colors.surface, colors.border, colors.critical, colors.success
spacing	spacing.xs, spacing.sm, spacing.md, spacing.lg, spacing.xl
fontFamily	Default font family
fontSize	Size scale
fontWeight	Weight scale

Utilities

import { createStyles, classNames } from "@qumra/manara";

// Combine CSS class names conditionally
const classes = classNames("base", isActive && "active", hasError && "error");

Next Steps

• Layout Components -- Page, Card, Box, InlineStack, BlockStack.
• Form Components -- Button, TextField, Select.
• Display Components -- Text, Badge, Banner, DataTable, Modal.