Installation

Design system 1 can be installed via package managers or loaded directly from a CDN.

Package Manager

Section titled “Package Manager”

Install Design system 1 using your preferred package manager:

Terminal window
# Using Vite+ (recommended)
vp add ds-one@alpha


# Using npm
npm install ds-one@alpha


# Using yarn
yarn add ds-one@alpha

CDN (No Build Step)

Section titled “CDN (No Build Step)”

For quick prototyping or simple projects, you can load Design system 1 directly from a CDN:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Design system 1 Example</title>


    <!-- Design system 1 Styles -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ds-one@alpha/DS1/1-root/one.css"
    />


    <!-- Design system 1 Components -->
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/ds-one@alpha/dist/ds-one.bundle.js"
    ></script>
  </head>
  <body>
    <ds-button variant="primary">Click Me</ds-button>
  </body>
</html>

Using @alpha Tag

Section titled “Using @alpha Tag”

For automatic updates to the latest alpha version, you can use the @alpha tag:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/ds-one@alpha/dist/ds-one.bundle.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/ds-one@alpha/DS1/1-root/one.css"
/>

Import in JavaScript/TypeScript

Section titled “Import in JavaScript/TypeScript”

After installing via package manager, you can import components:

// Import all components
import "ds-one";


// Or import specific components
import "ds-one/DS1/2-core/ds-button";
import "ds-one/DS1/2-core/ds-text";


// Import styles
import "ds-one/styles";

Next Steps

Section titled “Next Steps”