This repository contains demo applications that showcase SurveyJS Theme Adapters—a set of lightweight style mappings that allow SurveyJS components to inherit the visual language of popular UI frameworks and design systems without requiring custom CSS.
Each demo shows how to integrate a specific theme adapter into a SurveyJS application and how SurveyJS controls automatically adopt the appearance of the surrounding UI framework.
This repository includes theme adapter demos for the following CSS frameworks:
- Bootstrap
- Material UI (MUI)
- shadcn/ui
Additional adapters may be added over time.
SurveyJS v3.0 introduces a unified Design Tokens system based on CSS variables. Theme adapters map these design tokens to external framework-specific variables. Instead of overriding individual component styles, you install a single adapter that makes SurveyJS components automatically follow your application's existing design language.
Benefits include:
- Consistent appearance across your application
- Minimal CSS maintenance
- Easy switching between CSS frameworks
- Automatic support for future SurveyJS UI components
Each adapter has its own demo application that can be built and run independently:
Clone the repository:
git clone https://github.com/surveyjs/theme-adapter-demos.git
cd theme-adapter-demosInstall dependencies:
npm installNavigate to a demo:
cd bootstrapInstall its dependencies:
npm installStart the development server:
npm run dev