https://github.com/teradata/covalent
Covalent - A Design System for Teradata
https://github.com/teradata/covalent
angular angular-material angular2 material material-design teradata typescript
Last synced: 17 days ago
JSON representation
Covalent - A Design System for Teradata
- Host: GitHub
- URL: https://github.com/teradata/covalent
- Owner: Teradata
- License: mit
- Created: 2016-07-11T23:30:52.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2025-04-23T14:45:51.000Z (9 months ago)
- Last Synced: 2025-04-23T17:06:45.517Z (9 months ago)
- Topics: angular, angular-material, angular2, material, material-design, teradata, typescript
- Language: TypeScript
- Homepage: https://design.teradata.com
- Size: 172 MB
- Stars: 2,235
- Watchers: 105
- Forks: 358
- Open Issues: 85
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-angular-components - @covalent/core - Teradata UI Platform built on Angular-Material 2.0. (Uncategorized / Uncategorized)
- awesome-angular - @covalent/core - Teradata UI Platform built on Angular-Material 2.0. (Uncategorized / Uncategorized)
- awesome-angular-components - @covalent/core - Teradata UI Platform built on Angular-Material 2.0. (Uncategorized / Uncategorized)
README
# Covalent Design System
[](https://github.com/teradata/covalent/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/@covalent/core)
[](https://www.npmjs.com/package/@covalent/core/v/next)
[](https://gitter.im/Teradata/covalent?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](LICENSE)
Covalent is Teradata's design system used to create consistent, branded experiences. This repository provides tools and components to support developers building applications for Teradata products. We currently support Angular and offer a comprehensive library of web components.
**Vision: To build an atomic, reusable component platform for Teradata to consume, while collaborating in an open source model.**
## Setup
- Ensure you have Node 22.16.0+
- Install Node packages `npm ci`
- Run local build `npm run start`
---
- [Web Components](docs/COMPONENTS_QUICKSTART.md)
- [Web Components theming](docs/COMPONENTS_DEVELOPER_GUIDE.md)
- [Web Components developer Guide](docs/COMPONENTS_DEVELOPER_GUIDE.md)
- [Contributing guidelines](docs/CONTRIBUTING.md)
- [Releasing](docs/RELEASE.md)
- [Changelog](docs/CHANGELOG.md)
---
## Angular Support
- [Getting Started](docs/GETTING_STARTED.md)
- [StackBlitz Template](https://stackblitz.com/edit/covalent)
- [Plunker Template](http://plnkr.co/edit/XhSrUWBw2RhCkXPoE4fn)
Certain versions of Covalent are designed to work with specific versions of Angular. Below is a matrix that outlines these compatibility details:
| Covalent | Angular |
| :------: | :---------------: |
| 2.X | 8.X |
| 3.X | 9.X / 10.X / 11.x |
| 4.X | 12.X / 13.X |
| 5.X | 14.X |
| 6.X | 15.X |
| 7.X | 16.X |
| 8.X | 17.X |
| 9.X | 18.X |
| 10.X | 19.X |
| 11.X | 20.X |
...existing code...
---
## Angular Support
...existing code...
| 11.X | 20.X |
---
---
## Browser Support
Covalent is built on a CSS Flexbox layout and all layouts and components heavily rely on that support, so the current browsers are supported in order of recommendation:
#### Current version - 1 for the following:
| | Chrome | Firefox | Safari | Edge | Mobile Chrome | Mobile Safari |
| ------------- | :----: | :-----: | :----: | :--: | :-----------: | :-----------: |
| **Supported** | ✓ | ✓ | ✓ | ✓ | ~ | ~ |
~ Indicates limited testing & lower priority
## Using this workspace with VS code and NX
- Covalent uses [Nx](https://nx.dev/) for monorepo builds and task running.
- For a better experience, install the [Nx Console extension for VS Code](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console).
- **Nx Console** lets you:
- Run builds, tests, lint, and affected commands with a click.
- Generate libraries, components, and schematics interactively.
- Explore project/dependency graphs visually.
- Edit workspace configs quickly.
- **Get started:**
1. Open the repo in VS Code.
2. Install Nx Console from the Extensions Marketplace.
3. Use the Nx Console sidebar or search Nx commands in the Command Palette (`Cmd+Shift+P`).
## Running Chromatic
```bash
npx chromatic --project-token=${CHROMATIC_PROJECT_TOKEN}
```