@infineon/infineon-design-system-vue

Infineon Design System

🌐 The Digital Design System is the single source of truth for building digital experiences at Infineon. It consists of framework-agnostic web components, design tools and resources, guidelines and documentation.

🚀 Quick Start

For more detailed instructions, see the Installation & Usage Guide.

Installation

The shorter package names below are recommended for new projects. Existing @infineon/infineon-design-system-* packages remain available at matching versions, including their CDN assets. See the package migration guide.

# Using npm
npm install @infineon/design-system

# Using yarn
yarn add @infineon/design-system

# Using pnpm
pnpm add @infineon/design-system

Usage

Vanilla JavaScript / HTML

<script type="module" src="https://cdn.jsdelivr.net/npm/@infineon/design-system"></script>

<ifx-button>Click Me</ifx-button>

React

npm install @infineon/design-system-react

import { IfxButton } from '@infineon/design-system-react';

function App() {
  return <IfxButton>Click Me</IfxButton>;
}

Angular

npm install @infineon/design-system-angular

import { IfxComponentsModule } from '@infineon/design-system-angular';

@NgModule({
  imports: [IfxComponentsModule]
})
export class AppModule {}

Vue

npm install @infineon/design-system-vue

import { ComponentLibrary } from '@infineon/design-system-vue';

app.use(ComponentLibrary);

📦 Packages

This monorepo contains the following packages:

Package	Description	Version
@infineon/design-system	Core Stencil component library
@infineon/design-system-react	React wrapper
@infineon/design-system-angular	Angular wrapper
@infineon/design-system-vue	Vue wrapper

🏗️ Repository Structure

infineon-design-system-stencil/
├── packages/
│   ├── components/           # Core Stencil component library
│   ├── wrapper-react/        # React wrapper
│   ├── wrapper-angular/      # Angular wrapper
│   └── wrapper-vue/          # Vue wrapper
├── examples/
│   ├── html-cdn-example/     # HTML with CDN
│   ├── html-vite-example/    # HTML with Vite bundler
│   ├── react-example/        # React integration example
│   ├── angular-standalone-example/  # Angular standalone example
│   ├── angular-module-example/      # Angular module example
│   └── vue-example/          # Vue integration example
└── example-generator/        # Tool for generating examples from stories

💻 Development

The Infineon DDS web components are built with Stencil.

For detailed development instructions, see CONTRIBUTING.md.

Prerequisites

• Node.js: >= 18.0.0
• pnpm: >= 8.0.0

Setup

# Install dependencies
pnpm install

# Build the core components
pnpm run build:components

📚 Documentation

Quick Links

• Storybook (Live Demo) - Interactive component documentation with live examples
• Usage Guide - Detailed usage instructions for all frameworks
• Contributing Guidelines - How to contribute to this project
• AI Integration - DDS MCP, managed-device guidance, and Figma MCP/Code Connect setup

Additional Resources

• Example Generator Architecture - Technical details of the example generator
• Security Policy - Security and vulnerability reporting
• Changelog - Version history and changes

🎨 Storybook

View Live Storybook →

Or run locally:

cd packages/components
pnpm run storybook

The Storybook will be available at http://localhost:6262

🧪 Example Applications

All example applications demonstrate real-world usage of the design system:

Each example supports:

• dev - Start development server
• build - Build for production
• preview - Preview production build

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details on:

• Setting up your development environment
• Code standards and best practices
• Submitting pull requests
• Running tests and linting

📄 License

See LICENSE file for details.

🔒 Security

For security concerns, please see our Security Policy.

🔗 Links

• Stencil Documentation
• Web Components Standards

📞 Contact

Email: dds@infineon.com