cds-design

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

---

• 🪶 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.

npm install cds-design

or

yarn add cds-design

or

pnpm add cds-design

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

<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>

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

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

<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>

<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>

You can find the detailed documentation here.

This project is licensed under the MIT License.

Contributions, issues and feature requests are welcome!

Feel free to check issues page

Give a ⭐️ if this project helped you!