https://github.com/db-ux-design-system/core-web
DB UX Design System Monorepo - Provides Design Tokens and components for Web UIs
https://github.com/db-ux-design-system/core-web
a11y accessibility angular components css design-system html mitosis nextjs react scss tailwindcss vue
Last synced: 24 days ago
JSON representation
DB UX Design System Monorepo - Provides Design Tokens and components for Web UIs
- Host: GitHub
- URL: https://github.com/db-ux-design-system/core-web
- Owner: db-ux-design-system
- License: other
- Created: 2022-11-17T14:14:47.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-13T10:27:49.000Z (3 months ago)
- Last Synced: 2025-02-13T10:33:57.007Z (3 months ago)
- Topics: a11y, accessibility, angular, components, css, design-system, html, mitosis, nextjs, react, scss, tailwindcss, vue
- Language: TypeScript
- Homepage: https://db-ui.github.io/mono/
- Size: 914 MB
- Stars: 76
- Watchers: 8
- Forks: 10
- Open Issues: 161
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE-OF-CONDUCT.md
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# DB UX Design System v3 🚂💖
[](https://github.com/prettier/prettier)
[](https://github.com/xojs/xo)
[](http://makeapullrequest.com)
[](CODE-OF-CONDUCT.md)
DB UX Design System Version 3 provides robust HTML UI components, reusable visual styles, and powerful tooling to help developers,
designers, and content authors build, maintain, and scale best of class digital experiences.
We’re not designing pages anymore. We’re designing systems of components.
Stephen Hay. Cited in a talk by Brad Frost at beyond tellerrand conference.
## Packages
| Package | Content | Version |
| ----------------------------------------------------------------------------------------------- | ----------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [foundations](https://github.com/db-ux-design-system/core-web/tree/main/packages/foundations) | CSS/SCSS/Tailwind styles and assets | [](https://npmjs.com/package/@db-ux/core-foundations "DB UX Design System – on NPM") |
| [components](https://github.com/db-ux-design-system/core-web/tree/main/packages/components) | CSS/SCSS styles for components | [](https://npmjs.com/package/@db-ux/core-components "DB UX Design System – on NPM") |
| [ngx-core-components](https://github.com/db-ux-design-system/core-web/tree/main/output/angular) | Native Angular components | [](https://npmjs.com/package/@db-ux/ngx-core-components "DB UX Design System – on NPM") |
| [react-core-components](https://github.com/db-ux-design-system/core-web/tree/main/output/react) | Native React components | [](https://npmjs.com/package/@db-ux/react-core-components "DB UX Design System – on NPM") |
| [v-core-components](https://github.com/db-ux-design-system/core-web/tree/main/output/vue) | Native Vue 3 components | [](https://npmjs.com/package/@db-ux/v-core-components "DB UX Design System – on NPM") |
| [wc-core-components](https://github.com/db-ux-design-system/core-web/tree/main/output/stencil) | Web Components | [](https://npmjs.com/package/@db-ux/wc-core-components "DB UX Design System – on NPM") |
## How to use
Install your preferred package via npm or yarn e.g. `npm i @db-ux/react-core-components`.
Afterwards you need to add the specific CSS or SCSS files to provide the styles of DB UX Design System (Version 3), as described in the "Styling Dependencies" of each packages `README`.
We even also provide some [examples of integrations](https://github.com/db-ux-design-system/examples).
### DB Theme
In case that you're building a website or application for Deutsche Bahn, you'll additionally have to install the DB Theme via the [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) node package (even also available as an inner source node package, as described within that packages README).
## Components
We maintain a [status overview](https://github.com/orgs/db-ux-design-system/projects/4/views/1) for all components.
## Core principals
Consistent & Compliant
DB UX Design System Core Web is part of [DB UX Design System](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/DB-UX-Design-System/Design-fuer-Apps-Web/UI-Komponenten),
that are the guidelines for any Personenverkehr Customer and Deutsche Bahn Enterprise website and web applications.
Accessible
DB UX Design System leverages semantic HTML, ARIA roles, states and properties to apply our styles wherever possible, thus
enforcing correct, accessible markup. And we're quality checking this in partnership with
the [Team Digital Accessibility](https://db.de/8pei5n).
Declarative
DB UX Design System uses declarative selectors instead of visual helpers to ensure our HTML class names and structure are human
read- and understandable, lean, performant and so much easier to update.
Evergreen
As [DB UX Design System](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/DB-UX-Design-System/Design-fuer-Apps-Web/UI-Komponenten) evolves, so does DB UX Design System version 3, meaning apps only need to keep their DB UX Design System Core Web package updated to ensure the latest look and feel.
## Migration
### From DB UI Core or DB UI Elements to DB UX Design System Core
We're providing a detailed migration for each component next to the documentation of each component, like e.g.
### In between DB UX Design System Core versions
Check our migration docs for breaking changes:
1. [Alpha ➡ Beta](https://github.com/db-ux-design-system/core-web/tree/main/docs/migration/alpha-beta.md) (0.0.x➡0.x.x)
2. [v0.2 ➡ v0.3](https://github.com/db-ux-design-system/core-web/tree/main/docs/migration/v0.2.x-to-v0.3.x.md)
3. [v0.3 ➡ v0.4](https://github.com/db-ux-design-system/core-web/tree/main/docs/migration/v0.3.x-to-v0.4.x.md)
4. v0.4 ➡ v0.5: no migration needed, no breaking changes
5. [v0.5 ➡ v0.6](https://github.com/db-ux-design-system/core-web/tree/main/docs/migration/v0.5.x-to-v0.6.x.md)
6. [v0.6 ➡ v0.7](https://github.com/db-ux-design-system/core-web/tree/main/docs/migration/v0.6.x-to-v0.7.x.md)
7. [v0.7 ➡ v1.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v0.7.x-to-v1.0.0.md)
## FAQ
### Unexpected "new" colors
> We've updated to the stable version of DB UX Design System (v3) version >= 1.x, and now the colors that were supposed to be red, are colored in blue (`514ec7`).
Please have a look at the [migration guide from version 0.6.x to version 0.7.x](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v0.6.x-to-v0.7.x.md#removed-brand-assets), you need to install and reference the DB Theme, if you're building a website or web application for Deutsche Bahn.
## Things to keep in mind
### Developed for and driven by the community
This is mainly a platform providing the space and technology for a common basis of curated components; their development
is mainly driven by the community and adapted out of the work done in projects and through the huge amount of feedback
that we're gaining out of the community. So please support us in any way possible, this is greatly appreciated!
## How to start develop / contribute
If you're working as a developer on the DB UX Design System or would like to contribute, please have a look at the relevant [development documentation](docs/development.md).
## Give us your feedback!
This is only the first version of our framework and we really want your feedback - either within
the DB UX Design System Channel by Web Dev Community in
Microsoft Teams (only available DB internally), or directly
at [[email protected]](mailto:[email protected]).
We're particularly keen to add as many examples to the behaviours as possible, to further clarify them.
## Deutsche Bahn brand
As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and
trademarks are bound to clear guidelines and restrictions even when being used with the code that we're providing with
this product; Deutsche Bahn fully reserves all rights and ownership regarding the Deutsche Bahn brand, even though that
we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
Please have a look at our brand portal at for any further questions
and whom to contact on any brand issues. As these assets and visual guidelines are retrieved from our Deutsche Bahn
Marketingportal, you'll agree with
the ["Allgemeine Nutzungsbedingungen für das DB-Marketingportal" (german)](https://marketingportal.extranet.deutschebahn.com/marketingportal/Nutzungsbedingungen-9702684#)
in case of using them.
For any usage outside of Deutsche Bahn websites and applications you aren't allowed to use any Deutsche Bahn brand and
design assets as well as protected characteristics and trademarks, that for not including the DB Theme.
## Contributions
Contributions are very welcome, please refer to the [contribution guide](https://github.com/db-ux-design-system/core-web/blob/main/CONTRIBUTING.md).
## Code of conduct
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone – have a look at
our [Contributor Covenant Code of Conduct](https://github.com/db-ux-design-system/core-web/blob/main/CODE-OF-CONDUCT.md).
## License
This project is licensed under [Apache-2.0](LICENSE), Copyright 2024 by DB Systel GmbH.