{"id":26592004,"url":"https://github.com/db-ux-design-system/core-web","last_synced_at":"2026-04-08T17:00:54.001Z","repository":{"id":63718847,"uuid":"567307948","full_name":"db-ux-design-system/core-web","owner":"db-ux-design-system","description":"DB UX Design System monorepo - Provides Design Tokens and components for Web UIs","archived":false,"fork":false,"pushed_at":"2026-04-06T06:54:33.000Z","size":2433109,"stargazers_count":117,"open_issues_count":168,"forks_count":17,"subscribers_count":5,"default_branch":"main","last_synced_at":"2026-04-06T08:48:49.290Z","etag":null,"topics":["a11y","accessibility","angular","components","css","design-system","html","mitosis","nextjs","react","scss","tailwindcss","vue"],"latest_commit_sha":null,"homepage":"https://design-system.deutschebahn.com/core-web/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/db-ux-design-system.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-11-17T14:14:47.000Z","updated_at":"2026-04-04T12:03:32.000Z","dependencies_parsed_at":"2024-04-01T01:42:28.642Z","dependency_job_id":"cd943dfc-b06d-4eea-b343-8dc57a4404a4","html_url":"https://github.com/db-ux-design-system/core-web","commit_stats":null,"previous_names":["db-ux-design-system/core-web"],"tags_count":322,"template":false,"template_full_name":null,"purl":"pkg:github/db-ux-design-system/core-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db-ux-design-system%2Fcore-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db-ux-design-system%2Fcore-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db-ux-design-system%2Fcore-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db-ux-design-system%2Fcore-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/db-ux-design-system","download_url":"https://codeload.github.com/db-ux-design-system/core-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/db-ux-design-system%2Fcore-web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31564915,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","angular","components","css","design-system","html","mitosis","nextjs","react","scss","tailwindcss","vue"],"created_at":"2025-03-23T14:32:05.499Z","updated_at":"2026-04-08T17:00:53.952Z","avatar_url":"https://github.com/db-ux-design-system.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- markdownlint-configure-file { \"MD013\": false, \"MD041\":false } --\u003e\n\u003c!-- markdownlint-disable MD033 MD010 --\u003e\n\n\u003cpicture\u003e\u003csource srcset=\"https://design-system.deutschebahn.com/images/db-ux-design-system-v3-header.avif\" type=\"image/avif\"\u003e\u003csource srcset=\"https://design-system.deutschebahn.com/images/db-ux-design-system-v3-header.webp\" type=\"image/webp\"\u003e\u003cimg src=\"https://design-system.deutschebahn.com/images/db-ux-design-system-v3-header.jpg\" alt=\"\"\u003e\u003c/picture\u003e\n\n# DB UX Design System v3 🚂💖\n\n![Part of DB UX Design System (Version 3)](https://img.shields.io/badge/Part%20of-DB%20UX%20Design%20System%20v3-d7dce1.svg)\n[![Default Pipeline](https://github.com/db-ux-design-system/core-web/actions/workflows/default.yml/badge.svg)](https://github.com/db-ux-design-system/core-web/actions/workflows/default.yml)\n![Apache 2.0 license badge](https://img.shields.io/badge/License-Apache_2.0-blue.svg)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/xojs/xo)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE-OF-CONDUCT.md)\n\nDB UX Design System v3 provides robust HTML UI components, reusable visual styles, and powerful tooling to help developers,\ndesigners, and content authors build, maintain, and scale best-of-class digital experiences.\n\n\u003cfigure\u003e\n\t\u003ccite\u003eWe’re not designing pages anymore. We’re designing systems of components.\u003c/cite\u003e\n\t\u003cfigcaption\u003e\u003ca href=\"https://bradfrost.com/blog/post/bdconf-stephen-hay-presents-responsive-design-workflow/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eStephen Hay\u003c/a\u003e. \u003ca href=\"https://vimeo.com/67476280\" title=\"Brad Frosts at beyond tellerrand conference regarding Atomic Design\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eCited in a talk by Brad Frost at beyond tellerrand conference.\u003c/a\u003e\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n## Packages\n\n| Package                                                                                                       | Content                                      | Version                                                                                                                                                                                                                                                                                                                            |\n| ------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [@db-ux/core-foundations](https://github.com/db-ux-design-system/core-web/tree/main/packages/foundations)     | CSS/SCSS/Tailwind styles and assets          | [![@db-ux/core-foundations on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ux-design-system%2Fcore-web%2Freleases%2Flatest\u0026query=%24.tag_name\u0026label=npm\u0026color=ed1c24 \"npm version\")](https://npmjs.com/package/@db-ux/core-foundations \"DB UX Design System – on NPM\")           |\n| [@db-ux/core-components](https://github.com/db-ux-design-system/core-web/tree/main/packages/components)       | CSS/SCSS styles for components               | [![@db-ux/core-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ux-design-system%2Fcore-web%2Freleases%2Flatest\u0026query=%24.tag_name\u0026label=npm\u0026color=ed1c24 \"npm version\")](https://npmjs.com/package/@db-ux/core-components \"DB UX Design System – on NPM\")             |\n| [@db-ux/ngx-core-components](https://github.com/db-ux-design-system/core-web/tree/main/output/angular)        | Native Angular components                    | [![@db-ux/ngx-core-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ux-design-system%2Fcore-web%2Freleases%2Flatest\u0026query=%24.tag_name\u0026label=npm\u0026color=ed1c24 \"npm version\")](https://npmjs.com/package/@db-ux/ngx-core-components \"DB UX Design System – on NPM\")     |\n| [@db-ux/react-core-components](https://github.com/db-ux-design-system/core-web/tree/main/output/react)        | Native React components                      | [![@db-ux/react-core-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ux-design-system%2Fcore-web%2Freleases%2Flatest\u0026query=%24.tag_name\u0026label=npm\u0026color=ed1c24 \"npm version\")](https://npmjs.com/package/@db-ux/react-core-components \"DB UX Design System – on NPM\") |\n| [@db-ux/v-core-components](https://github.com/db-ux-design-system/core-web/tree/main/output/vue)              | Native Vue 3 components                      | [![@db-ux/v-core-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ux-design-system%2Fcore-web%2Freleases%2Flatest\u0026query=%24.tag_name\u0026label=npm\u0026color=ed1c24 \"npm version\")](https://npmjs.com/package/@db-ux/v-core-components \"DB UX Design System – on NPM\")         |\n| [@db-ux/wc-core-components](https://github.com/db-ux-design-system/core-web/tree/main/output/stencil)         | Web Components                               | [![@db-ux/wc-core-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ux-design-system%2Fcore-web%2Freleases%2Flatest\u0026query=%24.tag_name\u0026label=npm\u0026color=ed1c24 \"npm version\")](https://npmjs.com/package/@db-ux/wc-core-components \"DB UX Design System – on NPM\")       |\n| [@db-ux/core-eslint-plugin](https://github.com/db-ux-design-system/core-web/tree/main/packages/eslint-plugin) | ESLint plugin for component usage validation | [![@db-ux/core-eslint-plugin on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fregistry.npmjs.org%2F%40db-ux%2Fcore-eslint-plugin%2Flatest\u0026query=%24.version\u0026label=npm\u0026color=ed1c24 \"npm version\")](https://npmjs.com/package/@db-ux/core-eslint-plugin \"DB UX Design System – on NPM\")                        |\n| [@db-ux/core-stylelint](https://github.com/db-ux-design-system/core-web/tree/main/packages/stylelint)         | Stylelint plugin for CSS/SCSS usage          | [![@db-ux/core-stylelint on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fregistry.npmjs.org%2F%40db-ux%2Fcore-stylelint%2Flatest\u0026query=%24.version\u0026label=npm\u0026color=ed1c24 \"npm version\")](https://npmjs.com/package/@db-ux/core-stylelint \"DB UX Design System – on NPM\")                                    |\n\n### Which package should I choose?\n\n**For JavaScript framework-specific components**: Choose your framework package (React, Angular, Vue, Web Components) which includes styling and JavaScript behavior.\n\n**For other users**: Use `@db-ux/core-components` - it includes everything you need (foundations + component styles).\n\n**For design tokens only**: Use `@db-ux/core-foundations` if you only need colors, spacing, fonts, and icons without pre-built component styles.\n\n## How to use\n\n1. **Install your preferred package** via npm or yarn:\n    - For React: `npm i @db-ux/react-core-components`\n    - For Angular: `npm i @db-ux/ngx-core-components`\n    - For Vue: `npm i @db-ux/v-core-components`\n    - For Web Components: `npm i @db-ux/wc-core-components`\n    - For styling only: `npm i @db-ux/core-components`\n\n2. **Include the CSS styles** as described in the \"Styling Dependencies\" section of each package's `README`.\n\n\u003e **💡 Note**: All framework packages automatically include the necessary foundation styles - you don't need to install `@db-ux/core-foundations` separately!\n\nWe even provide some [examples of integrations](https://github.com/db-ux-design-system/examples).\n\n## AI Agent Support\n\nFor developers using AI coding assistants like GitHub Copilot or Amazon Q, we provide the [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) tool that automatically adds DB UX Design System documentation to your repository.\n\n### Quick Start\n\nRun this command in your repository:\n\n```shell\nnpx @db-ux/agent-cli\n```\n\nThis will create or update `.github/copilot-instructions.md` with component documentation based on your installed `@db-ux` packages, helping AI agents provide better suggestions.\n\n📖 **[Learn more about `@db-ux/agent-cli` node package](packages/agent-cli/README.md)**\n\n## Code Quality\n\nTo help enforce correct usage of DB UX Design System components in your codebase, we provide the [`@db-ux/core-eslint-plugin`](https://www.npmjs.com/package/@db-ux/core-eslint-plugin) ESLint plugin.\n\n### Quick Start\n\nInstall the plugin:\n\n```shell\nnpm install eslint @db-ux/core-eslint-plugin --save-dev\n```\n\nThen add it to your ESLint config:\n\n```js\n// eslint.config.js\nimport dbUx from \"@db-ux/core-eslint-plugin\";\n\nexport default [\n\t{\n\t\tplugins: {\n\t\t\t\"db-ux\": dbUx\n\t\t},\n\t\trules: dbUx.configs.recommended.rules\n\t}\n];\n```\n\n📖 **[Learn more about `@db-ux/core-eslint-plugin` node package](packages/eslint-plugin/README.md)**\n\n## Creating Custom Components\n\nFor developers looking to create custom components that extend the design system in their applications, we provide comprehensive guidance:\n\n📖 **[Creating Custom Components Guide](docs/creating-custom-components.md)** - Learn how to build your own components using design system foundations\n\nThis guide covers:\n\n- **Setup and Configuration**: Getting started with the design system packages\n- **Design Principles**: Following DB UX Design System guidelines and best practices\n- **Component Patterns**: Structured approaches to building consistent components\n- **Code Examples**: Practical implementations for cards, forms, navigation, and more\n- **Framework Support**: Specific guidance for React, Vue, Angular, and vanilla HTML/CSS\n- **Accessibility**: Ensuring your components are inclusive and compliant\n- **Common Pitfalls**: What to avoid and how to maintain design system consistency\n\n### DB Theme\n\nIn 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](https://www.npmjs.com/package/@db-ux/db-theme)).\n\n## Components\n\nWe maintain a [status overview](https://github.com/orgs/db-ux-design-system/projects/4/views/1) for all components.\n\n## Core principles\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e\n\tConsistent \u0026 Compliant\n\t\u003c/strong\u003e\u003c/summary\u003e\n\nDB 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),\nthat are the guidelines for any Personenverkehr Customer and Deutsche Bahn Enterprise website and web applications.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eAccessible\u003c/strong\u003e\u003c/summary\u003e\n\nDB UX Design System leverages semantic HTML, ARIA roles, states and properties to apply our styles wherever possible, thus\nenforcing correct, accessible markup. And we're quality checking this in partnership with\nthe [Team Digital Accessibility](https://db.de/8pei5n).\n\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eDeclarative\u003c/strong\u003e\u003c/summary\u003e\n\nDB UX Design System uses declarative selectors instead of visual helpers to ensure our HTML class names and structure are human\nread- and understandable, lean, performant and so much easier to update.\n\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eEvergreen\u003c/strong\u003e\u003c/summary\u003e\n\nAs [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.\n\n\u003c/details\u003e\n\n## Migration\n\n### From DB UI Core or DB UI Elements to DB UX Design System Core\n\nWe're providing a detailed migration for each component next to the documentation of each component, like e.g.\n[Button migration](https://design-system.deutschebahn.com/core-web/review/main/components/action/button/migration).\n\nFor a comprehensive overview of all DB-UI components and their migration status, including components that don't have direct equivalents in DB-UX Design System v3, see our [DB-UI to DB-UX Design System v3 Component Migration Guide](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/db-ui-to-db-ux-dsv3.md).\n\n### In between DB UX Design System Core versions\n\nCheck our migration docs for breaking changes:\n\n- [v3.x ➡ v4.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v3.x.x-to-v4.0.0.md)\n- [v2.x ➡ v3.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v2.x.x-to-v3.0.0.md)\n- [v1.x ➡ v2.0](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v1.x.x-to-v2.0.0.md)\n- [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)\n- [v0.6 ➡ v0.7](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v0.6.x-to-v0.7.x.md)\n- [v0.5 ➡ v0.6](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v0.5.x-to-v0.6.x.md)\n- v0.4 ➡ v0.5: no migration needed, no breaking changes\n- [v0.3 ➡ v0.4](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v0.3.x-to-v0.4.x.md)\n- [v0.2 ➡ v0.3](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/v0.2.x-to-v0.3.x.md)\n- [Alpha ➡ Beta](https://github.com/db-ux-design-system/core-web/blob/main/docs/migration/alpha-beta.md) (0.0.x➡0.x.x)\n\n## FAQ\n\n### Unexpected \"new\" colors\n\n\u003e We've updated to the stable version of DB UX Design System (v3) version \u003e= 1.x, and now the colors that were supposed to be red, are colored in blue (`514ec7`).\n\nPlease 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.\n\n## Things to keep in mind\n\n### Developed for and driven by the community\n\nThis is mainly a platform providing the space and technology for a common basis of curated components; their development\nis mainly driven by the community and adapted out of the work done in projects and through the huge amount of feedback\nthat we're gaining out of the community. So please support us in any way possible, this is greatly appreciated!\n\n## How to start developing / contributing\n\nIf you're working as a developer on the DB UX Design System or would like to contribute (many kudos for that !), please have a look at the relevant [development documentation](docs/development.md). We even also tag issues that might be a good starter for code contributions by the [tag \"good first issue\"](https://github.com/db-ux-design-system/core-web/issues?q=is%3Aissue%20state%3Aopen%20label%3A%22good%20first%20issue%22).\n\n\u003c!-- markdownlint-disable MD026 --\u003e\n\n## Give us your feedback!\n\n\u003c!-- markdownlint-disable MD026 --\u003e\n\n\u003c!-- markdownlint-disable MD033 --\u003e\n\nThis is only the first version of our framework and we really want your feedback - either within\nthe \u003ca href=\"https://db.de/krnm74\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eDB UX Design System Channel by Web Dev Community in\nMicrosoft Teams (only available DB internally)\u003c/a\u003e, or directly\nat [db-ux-designsystem@deutschebahn.com](mailto:db-ux-designsystem@deutschebahn.com). \u003c!-- markdownlint-disable MD033 --\u003e\nWe're particularly keen to add as many examples to the behaviours as possible, to further clarify them.\n\n## Deutsche Bahn brand\n\nTo perfectly support our users and customers on their digital journey, the use of the Deutsche Bahn brand and trademarks is subject\nto clear guidelines and restrictions even when used with the code provided by this product. Deutsche Bahn fully reserves all\nrights and ownership regarding the Deutsche Bahn brand, even though we provide the code for DB UX Design System products free of\ncharge under the Apache 2.0 license.\nPlease refer to our [brand portal](https://marketingportal.extranet.deutschebahn.com/) for further questions\ncontact details regarding brand issues. As these assets and visual guidelines are retrieved from our Deutsche Bahn\nMarketingportal, you'll agree with\nthe [\"Allgemeine Nutzungsbedingungen für das DB-Marketingportal\" (german)](https://marketingportal.extranet.deutschebahn.com/marketingportal/Nutzungsbedingungen-9702684#)\nin case of using them.\n\nFor any usage outside of Deutsche Bahn websites and applications you aren't allowed to use any Deutsche Bahn brand and\ndesign assets as well as protected characteristics and trademarks, that for not including the DB Theme.\n\n## Contributions\n\nContributions are very welcome, please refer to the [contribution guide](https://github.com/db-ux-design-system/core-web/blob/main/CONTRIBUTING.md).\n\n## Code of conduct\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone – have a look at\nour [Contributor Covenant Code of Conduct](https://github.com/db-ux-design-system/core-web/blob/main/CODE-OF-CONDUCT.md).\n\n## License\n\nThis project is licensed under the [Apache-2.0](LICENSE) license. © 2024 DB Systel GmbH.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdb-ux-design-system%2Fcore-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdb-ux-design-system%2Fcore-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdb-ux-design-system%2Fcore-web/lists"}