I'm using Odoo v16 and I want to use Odoo Official Frontend Docs for v16 as an example,

In the tutorial

I want to use the component inside an existing frontend page. assume I want to show the counter on my home page of the website (not a custom page initiated with from a controller and custom template and main.js)

I want use from the components ready in owl such as dropdown , checkbox

or ActionSwipe  components But as soon as I import these components, my screen displayed white and in the console the show:

Missing dependencies: ['@odoo/addons/web/core/checkbox/checkbox'] boot.js:348 Non loaded modules: ['@owl_playground/main']

and in manifest file add to web to depend part

how can these components be used?? my odoo version is 16

playground.js:

/** @odoo-module **/

import { Component } from "@odoo/owl";

import {CheckBox} from "../../../../odoo/addons/web/static/src/core/checkbox/checkbox";

export class Playground extends Component { 

​static template = "owl_playground.playground";

	​  static components = { CheckBox };

​}

xml:

xml version="1.0" encoding="UTF-8" ?>
xml:space="preserve">
    t-name="owl_playground.playground" owl="1">
        value="true">
	​	​Checkbox
        	​  Some Text
        /Checkbox
    

manifest file :

# -*- coding: utf-8 -*-
{
    'name': "owl_playground",

    'summary': """
        Play with Owl in this playground module""",

    'description': """
        Play with Owl in this playground module
    """,

    'author': "Odoo",
    'website': "https://www.odoo.com",

    # Categories can be used to filter modules in modules listing
    # Check https://github.com/odoo/odoo/blob/15.0/odoo/addons/base/data/ir_module_category_data.xml
    # for the full list
    'category': 'Productivity',
    'version': '0.1',

    # any module necessary for this one to work correctly
    'depends': ['base', 'web'],
    'application': True,
    'installable': True,
    'data': [
        'views/templates.xml',
    ],
    'assets': {
        'owl_playground.assets_playground': [
            # bootstrap
            ('include', 'web._assets_helpers'),
            'web/static/src/scss/pre_variables.scss',
            'web/static/lib/bootstrap/scss/_variables.scss',
            ('include', 'web._assets_bootstrap'),

            'web/static/src/libs/fontawesome/css/font-awesome.css', # required for fa icons
            'web/static/src/legacy/js/promise_extension.js', # required by boot.js
            'web/static/src/boot.js', # odoo module system
            'web/static/src/env.js', # required for services
            'web/static/src/session.js', # expose __session_info__ containing server information
            'web/static/lib/owl/owl.js', # owl library
            'web/static/lib/owl/odoo_module.js', # to be able to import "@odoo/owl"
            'web/static/src/core/utils/functions.js',
            'web/static/src/core/browser/browser.js',
            'web/static/src/core/registry.js',
            'web/static/src/core/assets.js',
            'owl_playground/static/src/**/*',
        ],
    }
}