Quick Start

Introduction

Anchor is a collection of reusable web components designed to help developers build fast, consistent, and beautiful user interfaces.

Installation

To get started with Anchor, you'll need to install the relevant packages for your project.

Initialize Anchor

npm install @tryg/ui-library

pnpm install @tryg/ui-library

yarn add @tryg/ui-library

bun add @tryg/ui-library

Getting Started

Once you've installed the web components package, you can start using the components in your HTML files.

<!-- Import the component -->
<script type="module">
  import { Button } from '@tryg/ui-library';
</script>

<!-- Use the component -->
<anchor-button>Click me!</anchor-button>

Or, if you're using a JavaScript framework like React or Vue, you can import and use the components in your JavaScript files.

import React from 'react';
import { Button } from '@tryg/ui-library';

function App() {
  return (
    <div>
      <anchor-button>Click me!</anchor-button>
    </div>
  );
}

export default App;

Learn More

For more information on getting started with Anchor, be sure to check out our documentation and guides.

React Components

Our React components package provides a set of pre-built components for building React applications, wrapping the native web components with a React interface.

Vue Components

Our Vue components package provides a set of pre-built components for building Vue applications, wrapping the native web components with a Vue interface.

Style Token Package

Our style token package provides a set of pre-defined design tokens in multiple formats (CSS, SCSS, etc.) for styling your components.

Stylelint Plugin Package

Our stylelint plugin package adds linting rules that help developers use the correct design tokens in their CSS/SCSS code.

Assets Documentation

Our asset packages contains our fonts, icons, and illustrations used within the organisation.