@qumra/manara

Qumra's design system — React components and design tokens for building admin interfaces.

منارة (manara) means "lighthouse" in Arabic, guiding your admin UI to clarity and consistency.

Installation

npm install @qumra/manara react react-dom

Peer Dependencies:

• React >=18
• React DOM >=18

Quick Start

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

export default function Dashboard() {
  return (
    <Page title="Dashboard">
      <Card>
        <Button onClick={() => alert('Hello!')}>Get Started</Button>
      </Card>
    </Page>
  );
}

Components

Layout

Page — Top-level page container with title and actions

<Page title="Users" actions={<Button>Add User</Button>}>
  {/* Content */}
</Page>

Layout — Flexible layout with optional sections

<Layout>
  <Layout.Section>Content</Layout.Section>
</Layout>

Card — Content container with elevation

<Card>
  <Text>Card content here</Text>
</Card>

Box — Primitive container for spacing and layout

<Box padding="lg">Box with padding</Box>

InlineStack — Horizontal flex container

<InlineStack gap="md">
  <Button>Cancel</Button>
  <Button variant="primary">Submit</Button>
</InlineStack>

BlockStack — Vertical flex container

<BlockStack gap="md">
  <Text>Item 1</Text>
  <Text>Item 2</Text>
</BlockStack>

Typography

Text — Semantic text rendering with variants

<Text variant="body" tone="critical">Error message</Text>

Forms

TextField — Single-line text input

<TextField label="Email" type="email" placeholder="[email protected]" />

Select — Dropdown selection

<Select label="Role" options={[{ label: 'Admin', value: 'admin' }]} />

Actions

Button — Interactive button with variants

<Button variant="primary" size="lg">Click Me</Button>

Feedback

Badge — Status indicator

<Badge tone="success">Active</Badge>

Banner — Alert or notification container

<Banner tone="warning">Check your settings</Banner>

Toast — Temporary notification

<Toast message="Changes saved" type="success" />

Spinner — Loading indicator

<Spinner />

Data

DataTable — Tabular data with sorting and pagination

<DataTable columns={[{ key: 'name', header: 'Name' }]} rows={data} />

Modal — Dialog overlay

<Modal open title="Confirm Action">
  <Text>Are you sure?</Text>
</Modal>

Design Tokens

Colors

Access colors for consistent theming:

import { colors } from '@qumra/manara';

// Usage in custom styles
const style = { color: colors.primary, background: colors.surface };

Available palettes: primary, success, warning, critical, surface, background, text

Spacing

Standard spacing scale for margins and padding:

import { spacing } from '@qumra/manara';

// xs, sm, md, lg, xl, xxl
const margin = spacing.md;

Typography

Font Family

import { fontFamily } from '@qumra/manara';

// fontFamily.base, fontFamily.mono

Font Size

import { fontSize } from '@qumra/manara';

// xs, sm, md, lg, xl, xxl

Font Weight

import { fontWeight } from '@qumra/manara';

// light, normal, medium, semibold, bold

Utilities

createStyles

Generate scoped CSS classes:

import { createStyles } from '@qumra/manara';

const styles = createStyles({
  container: { padding: '1rem', background: 'white' },
  active: { fontWeight: 'bold' }
});

<div className={styles.container}>
  <span className={styles.active}>Active</span>
</div>

classNames

Conditionally merge class names:

import { classNames } from '@qumra/manara';

<div className={classNames('base', { 'active': isActive })}>
  Conditional styling
</div>

Qumra Ecosystem

| Package | Description | |---------|-------------| | @qumra/app-sdk | Core SDK — sessions, security, errors | | @qumra/app-react-router | React Router 7 integration | | @qumra/app-session-storage-prisma | Prisma session storage | | @qumra/app-session-storage-mongodb | MongoDB session storage | | @qumra/jisr | App Bridge for iframe communication | | @qumra/manara | Design system & components | | @qumra/riwaq | UI Extensions SDK |

License

ISC © Qumra

Documentation

https://docs.qumra.cloud