Live Demo

DS one Components Live Demo

This page demonstrates DS one components working live, loaded from the CDN. All components on this page are actual DS one web components!

Buttons

Primary Button

Secondary Button

Text Button

<button-v1 variant="primary">Primary Button</button-v1>
<button-v1 variant="secondary">Secondary Button</button-v1>
<button-v1 variant="text">Text Button</button-v1>

Text Components

This is a DS one heading

This is DS one body text. It adapts to your theme automatically.

This is small text for captions and secondary information.

<text-v1 variant="heading">This is a DS one heading</text-v1>
<text-v1 variant="body">Body text content</text-v1>
<text-v1 variant="small">Small text</text-v1>

Icons

<icon-v1 name="check"></icon-v1>
<icon-v1 name="star"></icon-v1>
<icon-v1 name="search"></icon-v1>

Links

Visit GitHub

<link-v1 href="https://github.com/jo4712/ds-one">Visit GitHub</link-v1>

Tooltips

Hover over me

<tooltip-v1 text="This is helpful tooltip information!">
  Hover over me
</tooltip-v1>

Interactive Example

All DS one components support standard DOM events. Here’s an example with buttons:

Interactive Button

Try Clicking!

<!-- DS one buttons work with standard event listeners -->
<button-v1 variant="primary" id="my-button">Click Me</button-v1>

<script>
  document
    .getElementById("my-button")
    .addEventListener("click", () => alert("Clicked!"));
</script>

Combined Example

Featured Section

DS one components work seamlessly together and adapt to your design system.

Get Started

Learn More

Why It Works

DS one components are loaded from the CDN in the <head> of every page via our custom CustomHead.astro component. This means:

✅ Components work on every page
✅ No build step required for the components
✅ Always up-to-date with the latest version
✅ Fast loading from CDN
✅ Automatic theme adaptation