Infineon Design System

A comprehensive design system built with Stencil providing web components and framework-specific wrappers for React, Angular, and Vue.

🚀 Quick Start

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

Installation

# Using npm
npm install @infineon/infineon-design-system-stencil

# Using yarn
yarn add @infineon/infineon-design-system-stencil

# Using pnpm
pnpm add @infineon/infineon-design-system-stencil

Usage

Vanilla JavaScript / HTML

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

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

React

npm install @infineon/infineon-design-system-react

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

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

Angular

npm install @infineon/infineon-design-system-angular

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

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

Vue

npm install @infineon/infineon-design-system-vue

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

app.use(ComponentLibrary);

📦 Packages

This monorepo contains the following packages:

Package	Description	Version
@infineon/infineon-design-system-stencil	Core Stencil component library
@infineon/infineon-design-system-react	React wrapper
@infineon/infineon-design-system-angular	Angular wrapper
@infineon/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

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

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:

Example App	Live Demo	Dev Port	Command
HTML CDN Example	View →	3001	pnpm -F html-cdn-example dev
HTML Vite Example	View →	3002	pnpm -F html-vite-example dev
Angular Standalone Example	View →	3003	pnpm -F angular-standalone-example dev
Angular Module Example	View →	3004	pnpm -F angular-module-example dev
React Example	View →	3005	pnpm -F react-example dev
Vue Example	View →	3006	pnpm -F vue-example dev

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