An open API service indexing awesome lists of open source software.

https://github.com/kunai-consulting/qwik-design-system

The world's fastest UI toolchain
https://github.com/kunai-consulting/qwik-design-system

design-system qds qwik

Last synced: 5 months ago
JSON representation

The world's fastest UI toolchain

Awesome Lists containing this project

README

          

# Qwik Design System (QDS)

- 🌐 Runs in any environment (browser, server, etc)
- ⚡ Code executes based on user intent and interaction
- 🧩 Composable architecture
- 🔒 Comprehensive TypeScript support
- 🚀 Runs in any meta-framework that supports Qwik

Qwik Design System (QDS) is a UI toolchain for Qwik. It provides a cohesive set of packages for building high-performance, accessible, and scalable applications. Headless by design, you keep full control over styling and motion while QDS handles the complexity underneath.

## Quick Start

**New project (recommended):**

```bash
npm create qds@latest
```

**Add to existing project:**

```bash
npm install @qds.dev/ui
```

**Render your first component:**

```tsx
import { component$ } from '@qwik.dev/core';
import { Checkbox } from '@qds.dev/ui';

export default component$(() => {
return (




Accept terms

);
});
```

## Packages

**Core:**
- [@qds.dev/ui](./libs/components/README.md) - The core library of common UI patterns and over 200 icon packs.

**Supporting:**
- [@qds.dev/motion](./libs/motion/README.md) - Creating motion on the web
- [@qds.dev/code](./libs/code/README.md) - Live code previews and an environment agnostic code editor.

**Tooling:**
- [create-qds](./libs/cli/README.md) - CLI for project setup
- [@qds.dev/tools](./libs/tools/README.md) - Bundler tooling for the toolchain, built on top of OXC.
- [@qds.dev/base](./libs/base/README.md) - The shared code layer.

**Planned:**
- Data visualization - Environment agnostic charts and data display
- Tables - Accessible data tables and data grid

## Contributing

We welcome contributions! See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions.

Questions? Open an issue or find us in the Qwik Discord.

## Created by Kunai






Company logo




[Kunai](https://kunaico.com/) funds the work that makes Qwik Design System possible.

Their sponsorship enables:
- Full-time development of core components
- Comprehensive documentation and examples
- Regular maintenance and updates
- Community support and engagement

We're grateful for Kunai's continued support in making QDS a production-ready design system for the Qwik ecosystem.