cds-design

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