Skip to main content

Getting Started with Play+

Welcome to the Play+ Component Library — the official toolkit for bringing our Design that Breathes philosophy to life. This is where abstract design principles translate into production-grade, real-world interfaces that feel natural, fluid, and deeply engaging.

Play+ provides the foundation for crafting performant, elegant applications that feel intuitive and alive. It brings our design philosophy to life using modern, standards-based web technologies and offers first-class component libraries for both React and Angular, enabling seamless development across ecosystems.

To begin, you can proceed directly to Environment Setup to configure your development environment. Or, if you’re new to Play+, start by exploring our core Theming Principles to understand how we bring adaptive, immersive design into every component.

This section will help you get fully oriented with Play+ and begin integrating it into your own product development workflows.

What You’ll Find in This Section​

  • Installation
    Set up your development environment, install the Play+ libraries, and configure supporting tools using our CLI and guidelines.

  • Development
    Learn how to get the most out of Play+ starter kits, follow our development conventions, and preview your work with built-in scaffolding support.

  • Theming
    Understand our token-based design system and learn how to define custom themes that adapt Play+ to your product's unique identity.

  • Layout
    Dive into our responsive grid system, layout utilities, spacing tokens, and global style foundations that keep your UI clean and consistent.

  • Components
    Explore the full library of interactive, production-ready components. Each includes usage examples, accessibility notes, and full API documentation.

  • Concepts
    Understand the architectural philosophies and mental models behind Play+. Learn what makes it different and why it exists.

Overview​

The Play+ component library is designed with five core goals in mind, enabling your teams to build better digital experiences—faster and more reliably.

⚡️ Accelerate Development​

Empower teams with a rich set of pre-built, production-ready components that dramatically reduce the time and effort required to go from design to deployment.

🎯 Ensure Consistency​

Maintain a distinct and cohesive visual identity across all applications by leveraging a robust token-based design system. This guarantees that UI decisions are systematic, repeatable, and scalable.

🛠️ Promote Best Practices​

Bake in accessibility, responsiveness, and high performance as defaults—rather than afterthoughts—within every component. Play+ is built to meet modern web standards out of the box.

🎨 Empower Creativity​

Provide designers and developers with a deeply themeable, brand-adaptable system that embraces expressive creativity—while still preserving the integrity of the foundational design language.

🤝 Unify Teams​

Foster seamless collaboration between design and development by providing a single source of truth for tokens, components, and design decisions. This alignment helps cross-functional teams move faster with fewer handoffs.

Framework Compatibility​

Play+ is fundamentally framework-agnostic, built on standard web technologies with an architecture that promotes interoperability. To ensure the best developer experience, we provide dedicated, optimized component libraries for the most widely used frameworks:

React (v19 or newer)​

React’s declarative and component-driven architecture allows us to encapsulate Play+ behaviors—like Glass, Liquid, and Light—into elegant, reusable components. React’s efficiency and performance make it ideal for delivering fluid animations, responsive interactions, and seamless experiences, perfectly aligned with our "Design that Breathes" philosophy.

Angular (v20 or newer)​

Angular’s structured, TypeScript-first framework is a natural fit for building scalable, enterprise-grade applications. Its emphasis on consistency, dependency injection, and modularity allows Play+ to uphold its Distinct and Intuitive design pillars while offering strong maintainability and predictable patterns across large teams.

Support for Vue and Web Components is actively being explored and is on our future roadmap.

Ecosystem​

Play+ isn’t just a set of UI components—it’s a fully supported ecosystem built to help you succeed throughout the entire design and development lifecycle.

  • Play+ CLI
    A command-line interface for initializing new projects, scaffolding components, running previews, and managing configuration.
    Example: npx create-play-app my-project

  • VS Code Extension
    Offers real-time autocompletion, token suggestions, and IntelliSense for component properties—right from within your favorite IDE.

  • Figma Plugin
    A design plugin that brings Play+ tokens and components directly into your Figma canvas, allowing seamless collaboration and real-time design-to-code alignment.

These tools are optional, but highly recommended to maximize your productivity and ensure consistency across teams.

License​

Play+ is provided under an Enterprise License.

It is the intellectual property of Ascendion, and usage of the Play+ framework, tools, and libraries is governed by the license agreements of Ascendion. This includes but is not limited to the use, modification, redistribution, or sublicensing of the system and its assets.

For open-source components (if any), respective third-party licenses will apply.
Please contact your legal or procurement team to ensure compliance before integrating Play+ into any production project.

✅ Next Steps​

Let’s start building applications that breathe—together.