@abgov/react-components
v7.5.0
Published
Government of Alberta - UI components for React
Readme
React UI Components
React wrappers for the Government of Alberta Design System web components.
Supported React versions: 17, 18, and 19.
Install
npm i @abgov/react-components @abgov/web-components @abgov/ui-components-common @abgov/design-tokensRegister the web components
Import the underlying web components once in your application entry point, such as
src/main.tsx:
import "@abgov/web-components";Add styles
Import the component styles and design tokens in your main stylesheet, such as
src/index.css:
@import "@abgov/web-components/index.css";
@import "@abgov/design-tokens/dist/tokens.css";Add icons
Add Ionicons to the <head> of index.html:
<script
type="module"
src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.js"
></script>Use a component
import { GoabButton } from "@abgov/react-components";
export function App() {
return <GoabButton type="primary">Continue</GoabButton>;
}See the developer setup guide and Government of Alberta Design System for more information.