cds-design

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

🚀 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

or

yarn add cds-design

or

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>

📚 Documentation

You can find the detailed documentation here.

📝 License

This project is licensed under the MIT License.

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page

💪 Show your support

Give a ⭐️ if this project helped you!

🤝 Contributors

Made with ❤️ by Verve