# Get-started



# Get Started with Mark

> This guide will help you integrate Mark into your project, enabling you to create consistent and accessible user interfaces efficiently.

## Installation

Before installing Mark packages, you'll need to authenticate with the Github registry.<br/> 
Find more information from the [internal documentation →](https://gradegroup.atlassian.net/wiki/x/vQD2MQ)


### Install Core Packages

To begin using Mark, install our core packages using your preferred package manager:

```bash
npm install @mark/fonts @mark/icons @mark/tokens @mark/ui
```

### Optional Editor Package

If you need the WYSIWYG editor functionality, install it separately:

```bash
npm install @mark/editor
```

## IDE Setup

To enhance your development experience with autocompletion and documentation links, add the following to your `.vscode/settings.json`:

```json
{
  "html.customData": [
    "./node_modules/@mark/ui/dist/vscode.html-custom-data.json"
  ]
}
```

## Importing Required Packages

Before using Mark components, make sure to import all necessary packages in your main entry file (e.g., `main.ts`):

```typescript
import "@mark/fonts";
import "@mark/tokens/css";
import "@mark/icons";
import "@mark/ui";
// Import additional packages if needed
import "@mark/editor";
```

## Next Steps

Now that you have Mark installed and configured, you can start using the components in your application. Check out the the guide to learn about:

- Working with component properties and attributes
- Handling events and methods
- Using slots for content
- Integrating with Vue
- Best practices for accessibility

[Learn more about the web components →](?path=/docs/info-web-components--docs)