Azion Webkit Monorepo

Central front-end repository for Azion, containing reusable UI components, design tokens, icons, and documentation apps used across multiple products.

What is in this repository

• @aziontech/webkit: Vue component library and UI building blocks.
• @aziontech/theme: design token system, CSS variables, and Tailwind integration.
• @aziontech/icons: Azion + Prime icon fonts as CSS/woff2 assets.
• Storybook app for documentation and visual validation.
• Icons Gallery app for icon exploration and QA.

Workspace structure

webkit/
|- apps/
|  |- storybook/      # Component docs and development playground
|  \- icons-gallery/  # Interactive icon browser
|- packages/
|  |- webkit/         # Reusable Vue components
|  |- theme/          # Tokens and theme styles
|  \- icons/          # Icon generation and distribution
|- package.json       # Root workspace scripts
\- pnpm-workspace.yaml

Packages

Package	Description	CI	Version
@aziontech/icons	Azion and Prime icon fonts used across products.
@aziontech/theme	Theme configuration, semantic tokens, and styling foundations.
@aziontech/webkit	Reusable UI components and design system utilities.

Apps

App	Description	CI
storybook	Storybook documentation for @aziontech/webkit.	-
icons-gallery	Interactive gallery for Azion and Prime icons.

Getting started

Prerequisites

• Node.js >= 22.18.0
• pnpm 10.x

Install dependencies

From the repository root:

pnpm install

Most used commands

# Start Storybook (builds icons first)
pnpm storybook:dev

# Build Storybook static output
pnpm storybook:build

# Preview Storybook build
pnpm storybook:preview

# Build icon package artifacts
pnpm icons:build

# Generate declaration files for @aziontech/webkit
pnpm webkit:build:dts

Development flow

1. Create or update code in the proper package under packages/*.
2. Add or adjust stories under apps/storybook/src/stories.
3. Validate changes locally with pnpm storybook:dev.
4. Commit using conventional commits.
5. Push your branch and open a pull request.

Storybook

• Local docs app: apps/storybook
• The project includes a Foundations/Get Started documentation page with onboarding details.
• Use Storybook as the source of truth for component API and expected visual behavior.

Related docs

• Root Storybook app guide: apps/storybook/README.md
• Theme package guide: packages/theme/README.md
• Icons package guide: packages/icons/README.md
• Webkit package guide: packages/webkit/README.md

License

MIT © Azion Technologies