Arr Queue Card

[!WARNING] This repository was renamed. HACS may add a duplicate resource entry when updating, causing the old and new versions to load side by side — meaning the wrong version could be displayed with no obvious indication.

To fix: Go to Settings → Dashboards → Resources and remove the old entry /hacsfiles/homeassistant-arr-queue-card/arr-media-card.js if it's still there. Updating your custom repository URL to Liquidmasl/lovelace-arr-media-carrd should not be necessary, but doesn't hurt.

Verify in your browser console — ARR-MEDIA-CARRD should appear exactly once, at v1.3.4 or higher. Sorry for the inconvenience!

A custom Lovelace card for Home Assistant that displays your Radarr and Sonarr download queues and libraries in a beautiful, modern interface.

Queue Mode	Library Mode

Features

• Radarr & Sonarr Support: Use one or both - combine into a single unified queue
• Visual Editor: Configure the card using the UI - no YAML required
• Posters & Fanart: Beautiful backgrounds from TMDB/TVDB
• Live Search: Filter items by title with instant results
• Download Progress: Animated progress bars with status indicators
• Episode Info: Sonarr items show episode identifiers (S01E01 - Episode Title)
• Pagination: Navigate through large lists with ease
• Compact Mode: Space-efficient layout for smaller displays
• Fully Configurable: Toggle visibility of all UI elements

Requirements

• Home Assistant 2026.3 or newer
• Radarr and/or Sonarr integration configured in Home Assistant

Installation

HACS (Recommended)

1. Open HACS in Home Assistant
2. Go to "Frontend" section
3. Click the three dots menu and select "Custom repositories"
4. Add this repository URL and select "Lovelace" as the category
5. Install "Arr Queue Card"
6. Refresh your browser

Manual Installation

1. Download arr-media-carrd.js from the latest release
2. Copy it to your config/www folder
3. Add the resource in Home Assistant:
4. Go to Settings → Dashboards → ⋮ menu (top right) → Resources
5. Click Add Resource
6. URL: /local/arr-media-carrd.js
7. Type: JavaScript Module

Configuration

Basic Configuration

# Radarr only
type: custom:arr-media-card
radarr:
  entry_id: YOUR_RADARR_ENTRY_ID

# Sonarr only
type: custom:arr-media-card
sonarr:
  entry_id: YOUR_SONARR_ENTRY_ID

# Both combined
type: custom:arr-media-card
radarr:
  entry_id: YOUR_RADARR_ENTRY_ID
sonarr:
  entry_id: YOUR_SONARR_ENTRY_ID

Full Configuration

type: custom:arr-media-card
radarr:
  entry_id: YOUR_RADARR_ENTRY_ID
sonarr:
  entry_id: YOUR_SONARR_ENTRY_ID
view_mode: queue
max_items: 50
items_per_page: 5
refresh_interval: 60
show_fanart: true
compact_mode: false
show_count: true
show_tracker: true
show_download_client: true
show_refresh_button: true

Options

View Modes

Queue Mode (view_mode: queue): - Shows items currently in the download queue - Displays download progress, status, download client, and tracker - Sonarr items show episode info (e.g. S01E01 · The Pilot)

Library Mode (view_mode: library): - Shows items in your library - Displays availability status, year, and file size - Sonarr series are expandable — browse episodes grouped by season with availability counts

Radarr Library	Sonarr Library

Finding Your Entry ID

When using the visual editor, your Radarr and Sonarr integrations are automatically detected and shown in dropdown menus - no need to find entry IDs manually.

For YAML configuration, you can find the entry_id by:

1. Go to Developer Tools → Actions
2. Search for radarr.get_queue or sonarr.get_queue
3. The entry ID will be shown in the service call data

Development

Prerequisites

• Node.js 18+
• npm

Setup

npm install

Build

npm run build

Watch Mode

npm run watch

The built file will be in dist/arr-media-carrd.js.

License

MIT