[](https://stenciljs.com)
[](https://www.npmjs.com/package/@infineon/infineon-design-system-stencil)
[](https://www.npmjs.com/package/@infineon/infineon-design-system-stencil)
[](https://github.com/Infineon/infineon-design-system-stencil/blob/master/LICENSE)
# Infineon Design System
> 45+ production-ready web components built with Stencil. Framework-agnostic components that work everywhere: Vanilla JS, React, Angular, Vue, and more.
**[📚 View Live Storybook](https://infineon.github.io/infineon-design-system-stencil/)** | **[🎯 Example Apps](https://github.com/Infineon/infineon-design-system-stencil/tree/master/examples)** | **[📖 Full Documentation](https://github.com/Infineon/infineon-design-system-stencil)**
## ✨ Features
- ✅ **45+ Production-Ready Components** - Buttons, forms, tables, modals, navigation, and more
- ✅ **Framework Agnostic** - Works with React, Angular, Vue, or vanilla JavaScript
- ✅ **TypeScript Support** - Full type definitions included
- ✅ **Accessible** - WCAG 2.1 compliant components
- ✅ **Themeable** - Customizable with CSS custom properties
- ✅ **Tree-Shakeable** - Import only what you need
- ✅ **CDN Ready** - Use directly from jsDelivr with zero build setup
📦 View All Components
### Layout & Navigation
Accordion • Breadcrumb • Footer • Navigation • Tabs • Tree View
### Forms & Input
Button • Icon Button • Checkbox • Radio Button • Text Field • Textarea • Select • Dropdown • Switch • Slider • Search Bar • Search Field • Date Picker • File Upload
### Data Display
Table • Advanced Table • Overview Table • Card • Status • Indicator • Progress Bar • Chip • Tooltip
### Feedback & Messaging
Alert • Modal • Notification • Spinner
### Actions & Controls
Action List • Content Switcher • Segmented Control • Stepper • Pagination
## 🚀 Installation
```bash
npm install @infineon/infineon-design-system-stencil
```
## 📖 Usage
### Vanilla JavaScript / HTML
**Option 1: CDN (Easiest)**
```html
Click Me
```
**Option 2: NPM with Bundler (Tree-Shakeable)**
```javascript
// Import only the components you need
import '@infineon/infineon-design-system-stencil/dist/components/ifx-button';
import '@infineon/infineon-design-system-stencil/dist/components/ifx-switch';
```
### React
```bash
npm install @infineon/infineon-design-system-react
```
```jsx
import { IfxButton, IfxSwitch } from '@infineon/infineon-design-system-react';
function App() {
return (
<>
console.log('clicked')}>
Click Me
);
}
```
### Angular
```bash
npm install @infineon/infineon-design-system-angular
```
```typescript
// app.module.ts
import { IfxComponentsModule } from '@infineon/infineon-design-system-angular';
@NgModule({
imports: [IfxComponentsModule]
})
export class AppModule {}
```
```html
Click Me
```
### Vue
```bash
npm install @infineon/infineon-design-system-vue
```
```javascript
// main.js
import { ComponentLibrary } from '@infineon/infineon-design-system-vue';
app.use(ComponentLibrary);
```
```vue
Click Me
```
## 🎨 Theming
Customize components using CSS custom properties:
```css
ifx-button {
--ifx-button-primary-background: #006699;
--ifx-button-primary-color: #ffffff;
}
```
All design tokens are provided by `@infineon/design-system-tokens`.
## 📖 TypeScript Support
Full TypeScript definitions are included:
```typescript
import type { Components } from '@infineon/infineon-design-system-stencil';
// Get component interface
type ButtonProps = Components.IfxButton;
const buttonConfig: Partial = {
variant: 'primary',
disabled: false,
size: 'medium'
};
```
## 🤝 Contributing
We welcome contributions! Please see the main [Contributing Guide](../../CONTRIBUTING.md) for:
- Development setup
- Code standards
- Component creation guidelines
- Pull request process
## 📄 License
MIT License - see [LICENSE](../../LICENSE) file for details.
## 🔗 Links
- [GitHub Repository](https://github.com/Infineon/infineon-design-system-stencil)
- [npm Package](https://www.npmjs.com/package/@infineon/infineon-design-system-stencil)
- [Storybook Documentation](https://infineon.github.io/infineon-design-system-stencil/)
- [Issue Tracker](https://github.com/Infineon/infineon-design-system-stencil/issues)
- [Stencil Documentation](https://stenciljs.com/)
## 📞 Support
- **Email**: dds@infineon.com
- **Issues**: [GitHub Issues](https://github.com/Infineon/infineon-design-system-stencil/issues)## 📖 TypeScript
Full TypeScript definitions included:
```typescript
import type { Components } from '@infineon/infineon-design-system-stencil';
type ButtonProps = Components.IfxButton;
```
## 📚 Resources
- **[Live Storybook →](https://infineon.github.io/infineon-design-system-stencil/)** - Interactive component playground
- **[GitHub Repository →](https://github.com/Infineon/infineon-design-system-stencil)** - Source code & documentation
- **[Example Apps →](https://github.com/Infineon/infineon-design-system-stencil/tree/master/examples)** - React, Angular, Vue examples
- **[Contributing Guide →](https://github.com/Infineon/infineon-design-system-stencil/blob/master/CONTRIBUTING.md)** - How to contribute
## 🌐 Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## 🤝 Contributing
Contributions welcome! See our [Contributing Guide](https://github.com/Infineon/infineon-design-system-stencil/blob/master/CONTRIBUTING.md).
## 📄 License
MIT - see [LICENSE](https://github.com/Infineon/infineon-design-system-stencil/blob/master/LICENSE)
## 📞 Support
- **Email**: dds@infineon.com
- **Issues**: [GitHub Issues](https://github.com/Infineon/infineon-design-system-stencil/issues)