@1001tv/manara

v0.0.1

Published

10 days ago

Manara design system — React + Tailwind component library.

0High
0Medium
0Low

Manara

React component library — built with TypeScript, Tailwind CSS, and Headless UI. Includes Arabic / Kurdish (Sorani) RTL support out of the box.

Install

npm install @1001tv/manara

Peer dependencies: react ^18 || ^19, react-dom ^18 || ^19, tailwindcss ^3.4.0. The consumer must already have these installed.

Setup

Three one-time changes in your app.

1. Import the library CSS once

In your app entry (main.tsx, index.tsx, _app.tsx, etc.):

import '@1001/manara/styles';

This loads the design tokens (CSS variables), Inter + Noto Kufi Arabic font-face declarations, and a small set of keyframe animations.

Then opt in to the Manara base font by adding class="manara-root" to any element that wraps your app tree — most commonly the <body> in index.html:

<body class="manara-root">

The Manara font stack (Inter Display, then Noto Kufi Arabic, then sans-serif) cascades to every descendant. Any element outside .manara-root keeps its host app's typography. Skip this line entirely if the consumer already owns its own font system and just wants Manara components with the host font.

2. Wire the Tailwind plugin

In your tailwind.config.{ts,js,mjs}:

import { manaraPlugin } from '@1001tv/manara/tailwind-plugin';

export default {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@1001tv/manara/dist/**/*.js',
  ],
  plugins: [manaraPlugin({})],
};

Both pieces are required. The plugin generates the manara-* utilities (e.g. text-manara-primary, bg-manara-brand, p-manara-300); the extra content glob lets your Tailwind build see the classes used inside the library so they don't get tree-shaken out.

Tailwind v3 is currently required.

3. Use components

import { Card, Episode, Button, NavigationBar } from '@1001tv/manara';

export function Home() {
  return (
    <Card
      imageSrc="/poster.jpg"
      imageAlt="Show"
      isPremium
      tagLabel="Live"
      showLogo
    />
  );
}

Locale and RTL

All components accept an isArabic prop (default: true). Setting it to false switches to LTR layout and Latin typography. Both Arabic (ar) and Kurdish-Sorani (ckb) render in Noto Kufi Arabic; pick the appropriate font/direction via the isRtlLanguage and usesArabicFont helpers also exported from the package:

import { isRtlLanguage, usesArabicFont } from '@1001/manara';

Available components

Alert, Avatar, BottomSheet, Button, Card, Carousel, CarouselHeader, Chip, Episode, FeaturedCarousel, Footer, IconDisplay, Link, List, ListItem, Logo, Modal, NavigationBar, PlayerUI, ScrollingCard, TabButton, TabGroup, Tag, Toast, VideoPlayer, plus form inputs (Checkbox, Dropdown, OtpInput, Radio, Switch, TextArea, TextField).

Utility exports alongside the components: isRtlLanguage, usesArabicFont, formatPlayerTime, usePlayerShortcuts, and the DEFAULT_SNAP_POINTS constant used by BottomSheet.

Each component is fully typed; props and variants are visible from your IDE on hover.

Subpath exports

| Import path | What it gives you | | --- | --- | | @1001tv/manara | All components, types, and locale helpers. | | @1001tv/manara/styles | The library CSS (variables, font-face, keyframes). | | @1001tv/manara/tailwind-plugin | The Tailwind plugin that generates manara-* utilities. |

Development

This package is developed in the manara repo. For architecture, contribution guidelines, and the design-token system, see docs/DEVELOPMENT.md.

License

This package is published to the public npm registry solely for distribution to authorised 1001 projects. It is not licensed for public use, modification, redistribution, or derivative work. See LICENSE at the repo root for the full notice.