Vite

Steps to install

Create a Vite project

npm init vite@latest

You will be prompted with a series of questions. Select the following options:

terminal

✔ Project name: … project-name
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Install packages

npm i @govtechmy/myds-react @govtechmy/myds-style

Configure CSS stylesheet

You may configure the MYDS styling through one of (2) methods listed below.

1. CSS import

src/App.css

@import "@govtechmy/myds-style/full.css";

2. Tailwind CSS

Please read the Style Configuration for more advanced configuration.

Start using the components!

Here is a <Button /> for you to get started!

src/App.tsx

import { Button } from "@govtechmy/myds-react/button";
 
function App() {
  return (
      <Button variant="primary-fill">
        Hello MYDS
      </Button>
  )
}
 
export default App