UI-kit on Vue.js for 1C-Bitrix: Custom Development and Integration

When your Bitrix project has a team of 5+ developers and a catalog of tens of thousands of products, the interface starts to look like a patchwork quilt: buttons in different templates look different, modals are implemented in three ways, and notifications in four?

Each new component is written from scratch because there is no common standard. We have accumulated experience solving this problem in dozens of projects — and we know that a UI-kit on Vue.js with a unified API and documentation eliminates the chaos.

Turnkey UI-kit development reduces the time to create new features, improves interface consistency, and simplifies onboarding of new developers. Below is how we design and develop a UI-kit on Vue.js for 1C-Bitrix projects, including a real case and work stages.

What is a UI-kit and why is it needed in a Bitrix project

A UI-kit is a library of reusable Vue components with a unified visual language. It includes basic elements: buttons, input fields, modals, notifications, icons, typography. Each component encapsulates markup, styles, and behavior. In the context of 1C-Bitrix this is especially important because each component template may be written by different developers, and without a UI-kit consistency is lost.

Library architecture

Structure of a typical UI-kit:

/local/js/ui-kit/ ├── src/ │ ├── components/ │ │ ├── UiButton.vue │ │ ├── UiInput.vue │ │ ├── UiModal.vue │ │ ├── UiToast.vue │ │ └── ... │ ├── composables/ │ │ ├── useModal.js │ │ └── useToast.js │ ├── tokens/ │ │ └── design-tokens.css │ └── index.js ├── dist/ └── vite.config.js 

The library is built via Vite in UMD format:

// vite.config.js export default { build: { lib: { entry: './src/index.js', name: 'BitrixUIKit', formats: ['umd'], fileName: 'ui-kit', }, rollupOptions: { external: ['vue'], output: { globals: { vue: 'Vue' } } } } } 

Design tokens and CSS custom properties

All colors, spacing, radii, and shadows are stored as CSS custom properties. Components use tokens rather than hardcoded values. This allows theme changes without modifying the components:

:root { --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --radius-button: 6px; --shadow-modal: 0 20px 60px rgba(0,0,0,.2); } 

Typical component set for e-commerce:

What stages does UI-kit development include?

Here is a step-by-step guide for integrating a UI-kit into a project:

1. Conduct a UI audit — inventory all elements, identify duplicates.
2. Design the design system — fix tokens, component composition, variants, and states.
3. Develop components in Vue 3 with Composition API, typed props, encapsulated logic.
4. Set up build via Vite in UMD format with Vue as an external dependency.
5. Integrate the library into the Bitrix template using AddHeadScript and mount at the required points.

Integration with the template:

use Bitrix\Main\Page\Asset; $asset = Asset::getInstance(); $asset->addJs('/local/js/ui-kit/dist/ui-kit.umd.js'); $asset->addCss('/local/js/ui-kit/dist/ui-kit.css'); 

As the Vue.js documentation says, components are reusable instances, and a UI-kit implements this principle in practice.

Why invest in a UI-kit?

A UI-kit solves three key problems. First, development speed: a new template is assembled from ready-made components instead of being written from scratch. Second, consistency: the user sees the same buttons and forms throughout the site, which builds trust. Third, easy onboarding: a new developer gets familiar with the component library in a couple of days instead of figuring out 12 button variants. Our experience shows that after implementing a UI-kit, the time to create new functionality is reduced by 30–50%, and the number of interface-related bugs drops to near zero. The library is accompanied by documentation (at least a README, in large projects — Storybook) and is kept up-to-date. Thanks to component reuse, the cost of developing a new functional block is halved.

Case: UI-kit for a large online store from our practice

Client — a home appliance retailer with a catalog of 25,000 SKUs. Team: 4 frontend developers. Problem: over time, the site was developed by different teams, CSS accumulated 8 button variants, 3 modal implementations (jQuery, Bootstrap, custom), and 2 notification variants.

First stage — audit: collected all unique UI elements from the entire site. Got 47 element types that needed unification. Second stage — design: together with the designer, we fixed the design system (tokens, 24 components, their variants and states). Third stage — development: wrote the library in Vue 3 with Composition API, included UiButton, UiInput, UiModal, UiToast, UiPagination, UiDropdown, UiLoader, and others. Fourth stage — migration: replaced old implementations with kit components, starting with new templates and the messiest old ones.

Result: development speed doubled, design review time shrank from 2 hours to 30 minutes, all new features immediately fit into a unified design system. Implementation time — 6 weeks. Vue.js components are developed 2 times faster than jQuery analogs — the speed difference is especially noticeable on complex custom elements.

How we work: process and timeline

Full cycle for a basic UI-kit (15–20 components) — 6–10 weeks. For a large project with 30–50 components and Storybook — 8–14 weeks.

Guarantees and experience

We have been developing on 1C-Bitrix and Vue.js for over 10 years. Certified specialists, dozens of successful UI-kit implementations for retail, services, and corporate portals. We provide a 6-month warranty on components. Order a UI-kit development for your project — get a consultation on timeline and cost. Contact us for an assessment of your project — we will prepare a proposal for a turnkey UI-kit.

Useful resource: Vue.js.