Live Demo

Design system 1 Components Live Demo

This page demonstrates Design system 1 components working live, loaded from the CDN. All components on this page are actual Design system 1 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 Design system 1 heading

This is Design system 1 body text. It adapts to your theme automatically.

This is small text for captions and secondary information.

<ds-text variant="heading">This is a Design system 1 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 Design system 1 components support standard DOM events. Here’s an example with buttons:

Interactive Button

Try Clicking!

<!-- Design system 1 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

Design system 1 components work seamlessly together and adapt to your design system.

Get Started

Learn More

Why It Works

Design system 1 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