Using a Custom Card from HACS

I installed the battery-state-card from the HACS Frontend. When I tried to add it from the Add Card dialog I don’t see it. I tried to use the manual option and added custom:battery-state-card as the type. I got an error that it wasn’t found. Am I doing this wrong? Do I need to add something to the config?

In the repository for the frontend, the following example is given for a Card View:

type: custom:battery-state-card
title: "Battery levels"
entities:
  - sensor.bathroom_motion_battery_level
  - sensor.bedroom_balcony_battery_level
  - entity: sensor.bedroom_motion_battery_level
    name: "Bedroom motion sensor"

This is a link to the frontend repository

I found another post on the problem and it appears I’m doing what should be done. I tried to use two other custom cards. They are not being recognized either. When I enter custom: and then the card, it looks to be doing a search. All three have directories under www/community. Should there be something in the config file to point to them? I’ve seen mention of adding it as a resource in the Lovelace configuration panel. I tried it and it doesn’t work. I’m not sure of the format as I’ve seen two different examples. I tried:

/local/battery-state-card.js

Customs cards wont appear in the add card tabs, instead we have to add it as a manual card. Please share the config that you used in lovelace to check what is the issue in it.