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

<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 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.

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

Icons

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

Links

Visit GitHub

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

Tooltips

Hover over me

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

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 -->
<ds-button variant="primary" id="my-button">Click Me</ds-button>

<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 MyHead.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