Skip to content
GU - Design System

Installation

  1. Create a new Personal Access Token on GitHub

    • Open GitHub.com
    • Click on your profile picture in the top right corner
    • Go to Settings > Developer settings > Personal access tokens > Tokens (classic) > Generate new token > Generate new token (classic)
    • Enter a name for the token (e.g. PROJECT-NAME_GLOWUP_DESIGN_SYSTEM)
    • Select an expiration
    • Select the read:packages scope
    • Click on Generate token

    You now have a Personal Access Token that will allow you to install the private library.

  2. Add the GITHUB_TOKEN to your environment variables

    Add the following line to the .devcontainer/.env.local file :

    .devcontainer/.env
    GIT_NAME=name
    GIT_EMAIL=[email protected]
    GITHUB_TOKEN=your_personal_access_token
    

    AI_CHAT_MODEL=claude-3-5-sonnet-20240620
    AI_CHAT_PROVIDER=anthropic
    AI_CHAT_TOKEN=your_ai_chat_token
    

    AI_COMPLETION_MODEL=codestral-latest
    AI_COMPLETION_PROVIDER=mistral
    AI_COMPLETION_TOKEN=your_ai_completion_token

  3. Install the Design System library

    Terminal
    npm i @behavy/glowup-design-system

  4. Import and use the components of your choice

    src/app.html
    <!doctype html>
    <html lang="en">
    <html lang="en" class="design-system">
       <head>
          <meta charset="utf-8" />
          <link rel="icon" href="%sveltekit.assets%/favicon.png" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          %sveltekit.head%
       </head>
       <body data-sveltekit-preload-data="hover">
          <div>%sveltekit.body%</div>
       </body>
    </html>
    src/example.ts
    <script lang='ts'>
       // ...
       import { Component } from '@behavy/glowup-design-system';
    </script>
    

    <Component />
    

    <style>
       /* ... */
    </style>