Quickstart

Dependency

On the HTML page add the style and script of VDS library.

<!doctype html>
<html>
    <head>
        <!-- recommended to load styles at start -->
        <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" crossorigin="anonymous" />
        <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" crossorigin="anonymous" />    
        <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css" crossorigin="anonymous">

        <link type="text/css" rel="stylesheet" href="https://vtigerdesignsystem.vtiger.com/vds/variable.css">
        <link type="text/css" rel="stylesheet" href="https://vtigerdesignsystem.vtiger.com/vds/index.css">
    </head>

    <body>

        <!-- recommended to load script at end -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" crossorigin="anonymous"></script>

        <script src="https://vtigerdesignsystem.vtiger.com/vds/dist/vds.umd.js"></script>
    </body>
</html>

Usage

Once the dependency is added. You can use vds-* components in HTML or Javascript like any other HTML tag.

<body>
    <vds-button variant="primary">Hello World</vds-button>
</body>

Congratulations! on getting started. You can go further with examples or explore more detailed usage of components.