db-ux-design-system / core-web

DB UX Design System v3 🚂💖 DB UX Design System v3 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 | | --------------------------------------------------------------------------------------------------------- | ----------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | @db-ux/core-foundations | CSS/SCSS/Tailwind styles and assets | | | @db-ux/core-components | CSS/SCSS styles for components | | | @db-ux/ngx-core-components | Native Angular components | | | @db-ux/react-core-components | Native React components | | | @db-ux/v-core-components | Native Vue 3 components | | | @db-ux/wc-core-components | Web Components | | Which package should I choose? **For JavaScript framework-specific components**: Choose your framework package (React, Angular, Vue, Web Components) which includes styling and JavaScript behavior. **For other users**: Use - it includes everything you need (foundations + component styles). **For design tokens only**: Use if you only need colors, spacing, fonts, and icons without pre-built component styles. How to use • **Install your preferred package** via npm or yarn: • For React: • For Angular: • For Vue: • For Web Components: • For styling only: • **Include the CSS styles** as described in the "Styling Dependencies" section of each package's . > **💡 Note**: All framework packages automatically include the necessary foundation styles - you don't need to install separately! We even provide some examples of integrations. AI Agent Support For developers using AI coding assistants like GitHub Copilot or Amazon Q, we provide the tool that automatically adds DB UX Design System documentation to your repository. Quick Start Run this command in your repository: This will create or update with component documentation based on your installed packages, helping AI agents provide better suggestions. 📖 **Learn more about node package** Creating Custom Components For developers looking to create custom components that extend the design system in their applications, we provide comprehensive guidance: 📖 **Creating Custom Components Guide** - Learn how to build your own components using design system foundations This guide covers: • **Setup and Configuration**: Getting started with the design system packages • **Design Principles**: Following DB UX Design System guidelines and best practices • **Component Patterns**: Structured approaches to building consistent components • **Code Examples**: Practical implementations for cards, forms, navigation, and more • **Framework Support**: Specific guidance for React, Vue, Angular, and vanilla HTML/CSS • **Accessibility**: Ensuring your components are inclusive and compliant • **Common Pitfalls**: What to avoid and how to maintain design system consistency 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 node package (even also available as an inner source node package, as described within that packages README). Components We maintain a status overview for all components. Core principles Consistent & Compliant DB UX Design System Core Web is part of DB UX Design System, 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. 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 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. Button migration. For 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. In between DB UX Design System Core versions Check our migration docs for breaking changes: • v3.x ➡ v4.0 • v2.x ➡ v3.0 • v1.x ➡ v2.0 • v0.7 ➡ v1.0 • v0.6 ➡ v0.7 • v0.5 ➡ v0.6 • v0.4 ➡ v0.5: no migration needed, no breaking changes • v0.3 ➡ v0.4 • v0.2 ➡ v0.3 • Alpha ➡ Beta (0.0.x➡0.x.x) 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 ( ). Please have a look at the migration guide from version 0.6.x to version 0.7.x, 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…