Installation

The Halstack component library is available as an npm package, making it simple to install and integrate into your project using your preferred package manager (npm, yarn, pnpm, bun, etc.).

Setting up and initializing a new project is beyond the scope of this documentation. However, we highly recommend using Vite to bootstrap your projects for an optimized development experience.

If needed, the official React documentation provides a comprehensive guide to help you get started.

npm i react react-dom styled-components

npm i @dxc-technology/halstack-react

import { DxcButton, DxcFlex, DxcHeading, DxcParagraph } from "@dxc-technology/halstack-react";

() => (
  <DxcInset space="2rem">
    <DxcFlex direction="column" gap="1.5rem">
      <DxcHeading level={2} text="Welcome to Halstack!" />
      <DxcParagraph>
        Halstack is an Open Source Design System built and maintained by DXC Technology 
        with the purpose of providing all the necessary tools for designing 
        and implementing accessible, intuitive and consistent User Experiences 
        with Figma, UXPin and React.
      </DxcParagraph>
      <DxcButton label="Click me!" onClick={() => alert("Hello world!")} />
    </DxcFlex>
  </DxcInset>
);

Before you continue developing your project with Halstack, we encourage you to read our principles. This will help you understand the design foundations behind the components and how to use them effectively.