Skip to content DS OneQuick Start | DS one
DS one

Quick Start

Create a simple HTML page using DS one components:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My DS one App</title>


    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ds-one@alpha/DS1/1-root/one.css"
    />
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/ds-one@alpha/dist/ds-one.bundle.js"
    ></script>
  </head>
  <body>
    <ds-layout>
      <ds-header slot="header">
        <ds-title variant="site">My App</ds-title>
      </ds-header>


      <main>
        <ds-text variant="heading">Welcome to DS one</ds-text>
        <ds-text variant="body">
          A modern design system built with TypeScript and Lit.
        </ds-text>


        <ds-button variant="primary">Get Started</ds-button>
        <ds-button variant="secondary">Learn More</ds-button>
      </main>
    </ds-layout>
  </body>
</html>

Basic Components

Section titled “Basic Components”

Button

Section titled “Button”
<ds-button variant="primary">Primary Button</ds-button>
<ds-button variant="secondary">Secondary Button</ds-button>
<ds-button variant="text">Text Button</ds-button>

Text

Section titled “Text”
<ds-text variant="heading">This is a heading</ds-text>
<ds-text variant="body">This is body text</ds-text>
<ds-text variant="small">This is small text</ds-text>
Section titled “Link”
<ds-link href="https://example.com">Visit Example</ds-link>
<ds-link href="/about" internal>About Page</ds-link>

With Translation Support

Section titled “With Translation Support”

DS one includes built-in internationalization:

<script type="module">
  import {
    setLanguage,
    loadTranslations,
  } from "https://cdn.jsdelivr.net/npm/ds-one@alpha/dist/ds-one.bundle.js";


  // Load translations
  await loadTranslations({
    en: { greeting: "Hello", welcome: "Welcome" },
    es: { greeting: "Hola", welcome: "Bienvenido" },
  });


  // Set language
  setLanguage("en");
</script>


<ds-text data-key="greeting"></ds-text>
<ds-text data-key="welcome"></ds-text>

Next Steps

Section titled “Next Steps”