https://github.com/govalta/ui-components
ui-components contains the code you need to start building a user interface for Government of Alberta platforms and services.
https://github.com/govalta/ui-components
angular react svelte webcomponent
Last synced: 24 days ago
JSON representation
ui-components contains the code you need to start building a user interface for Government of Alberta platforms and services.
- Host: GitHub
- URL: https://github.com/govalta/ui-components
- Owner: GovAlta
- License: apache-2.0
- Created: 2021-06-17T20:58:59.000Z (almost 5 years ago)
- Default Branch: dev
- Last Pushed: 2026-02-18T01:36:08.000Z (about 1 month ago)
- Last Synced: 2026-02-18T03:38:33.498Z (about 1 month ago)
- Topics: angular, react, svelte, webcomponent
- Language: TypeScript
- Homepage:
- Size: 30.6 MB
- Stars: 25
- Watchers: 8
- Forks: 34
- Open Issues: 393
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# About
This project contains the Government of Alberta UI components. This web component
project supports multiple frontend frameworks, React and Angular. The project
is designed to be used to help bring consistency to all Government of Alberta
websites and web applications. It's also being designed to help ease the burden
on designers and developers alike throughout the development process.
### Developer setup
LSP tools
```
npm i -g typescript-language-server \
svelte-language-server \
prettier \
vscode-css-languageservice \
vscode-html-languageservice
```
### Playground setup
Run the `dev-setup` file.
```bash
npm run dev:setup
```
You can then test the playground apps at `localhost:4200` by running:
```bash
# build the web components
npm run dev:watch
# add one of the following
npm run serve:dev:angular
npm run serve:dev:react
npm run serve:dev:web
```
---
## Contribution Guidelines
The design system team is using “Discussions” in the UI-components GitHub
repository for managing the creation and assessment of new ideas for platform
components, services, and capabilities.
### Ideas for enhancements, additions, or improvements
Before creating a new discussion topic, check the discussion board for any
existing ideas that may match yours. If there is a good match, please add your
examples and comments to the existing discussion instead of creating a new one.
If a related discussion topic already exists please join in the discussion!
Provide a high-level description, relevant links and examples of the idea to
the discussion topic.
Socialize your discussion topic with your colleague's to help refine and drive
out contexts and use cases. If possible have those team members join the “discussion”.
“Vote” on the topics that you think are the highest priority.
### What happens to these "discussions?"
Discussion topics that have the most votes and/or input from a number of different
team members will be evaluated every two-week cycle by the Design System team.
Those items that have the most number of votes and/or input will be evaluated.
Opportunities are assessed against WiP limits.
After an assessment, selected “discussions” will be transitioned to “issues” and
assigned and prioritized in the different “project” views
(Figma, Angular, React, etc.)
## Documentation
You can view the [documentation](https://design.alberta.ca). This has all
the info on how to implement our components, as well as how to get setup to contribute.
## How to Contribute
You can view how you can [contribute](contributing.md).
### Library and Applications
| Library | Description |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
| web-components | Library of native web components. Published to NPM [@abgov/web-components](https://www.npmjs.com/package/@abgov/web-components). |
| react-components | Library of components for React. Published to NPM [@abgov/react-components](https://www.npmjs.com/package/@abgov/react-components). |
| angular-components | Library of components for Angular. Published to NPM [@abgov/angular-components](https://www.npmjs.com/package/@abgov/angular-components). |
| ~~styles~~ | Deprecated [^1] |
[^1]: The npm package, @abgov/styles is now deprecated. Import styles(css) from the web-components package. `@import "@abgov/web-components/index.css";`. For more instructions find the appropriate setup documentation [here](https://ui-components.alberta.ca)