Cds-design NPM

`cds-design`

A component library for CDS (Continuum Design System) by Verve.

npm MIT license npm GitHub top language GitHub commit activity (branch) Types Included

🚀 Features

🪶 Lightweight: The library is very lightweight, that it costs around 5KB plus 2KB per component in your bundle.
⚙️ Framework Agnostic: The library is framework agnostic and can be used with any framework or even vanilla HTML.
🔧 Customizable: The library is highly customizable and you can customize the components to your needs.
♿️ Accessible: The library is accessible and follows the WAI-ARIA guidelines.
🔥 Performant: The library is performant by utilizing Web Components and employing Lazy loading, Tree-Shaking, and many more technologies under the hood.
💻 Cross-Browser: The library is build on browser native technologies and works on all modern browsers.
👨‍💻 DX: The library is build with developer experience in mind and provides a great developer experience. All components are typed and provide great intellisense support.

⬇️ Installation

npm install cds-design

yarn add cds-design

pnpm add cds-design

📦 Usage

After installing you can directly use the components in your project.

Vanilla HTML

<script type="module">
    import { load } from "https://esm.run/cds-design" // or import load from "https://esm.run/cds-design"
    load("button", "input", "checkbox")
</script>

<cds-button>Click Me</cds-button>

React (JSX)

import { load } from "cds-design" // or import load from "cds-design"
load("button", "input", "checkbox")

export default () => {
  return (
    <cds-button>Click Me</cds-button>
  )
}

Vue (Composition API)

<script setup lang="ts">
    import { load } from "cds-design" // or import load from "cds-design"
    load("button", "input", "checkbox")
</script>

<template>
    <cds-button>Click Me</cds-button>
</template>

Svelte

<script context="module">
    import { load } from "cds-design" // or import load from "cds-design"
    load("button", "input", "checkbox")
</script>

<cds-button>Click Me</cds-button>