Wireframes Home Docs Components Playground
Installation Wireframes is a framework-agnostic library of standard Web Components. Install it once and use the wf-* custom elements in any project. npm pnpm yarn bun 
npm install wireframes
 
pnpm add wireframes
 
yarn add wireframes
 
bun add wireframes
 Import the package once in your application entry point to register the custom elements: 
import 'wireframes';
React Use wf-* elements directly in JSX. With React 18 use kebab-case attributes such as aspect-ratio. For TypeScript, add /// <reference types="wireframes/react" />. Vue Import the package once and tell Vue that wf-* tags are custom elements: app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('wf-') (or configure the same option in the Vue Vite plugin). Svelte Use the custom elements in Svelte markup and import wireframes once in your app entry point or component. In SvelteKit, load it in onMount so registration happens in the browser: 
<script>
  import { onMount } from 'svelte';

  onMount(() => import('wireframes'));
</script>

<wf-button>Click me</wf-button>
Next.js In the App Router, register the elements from a client component. In a TypeScript file, include the Wireframes React type reference as shown. 
/// <reference types="wireframes/react" />
'use client';

import { useEffect } from 'react';

export function WireframesButton() {
  useEffect(() => {
    import('wireframes');
  }, []);

  return <wf-button>Click me</wf-button>;
}
See the project examples for working integrations.
CDN Custom Elements Alternatively, you can use the CDN to load the components in your project. 
<script type="module" src="https://cdn.jsdelivr.net/npm/wireframes/lib/index.js"></script>
Example 
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="https://cdn.jsdelivr.net/npm/wireframes/lib/index.js"></script>
</head>

<body>
    <wf-title tag="h1">Login</wf-title>
    <wf-input placeholder="Username"></wf-input>
    <wf-input placeholder="Password" type="password"></wf-input>
    <wf-button>Login</wf-button>
</body>

</html>
CDN Styles You can use the CDN to load the styles into your project. Custom Elements is not included. Normally use headers, input, buttons and these will be styled. 
<link rel="stylesheet" href="https://wireframes.salteadorneo.dev/cdn/wireframes.css" />
Example 
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://wireframes.salteadorneo.dev/cdn/wireframes.css" />
</head>

<body>
    <h1>Login</h1>
    <input placeholder="Username"></input>
    <input placeholder="Password" type="password"></input>
    <button>Login</button>
</body>

</html>
CDN Styles + Tailwind CSS You can use the CDN to load the styles into your project. Custom Elements is not included. Normally use headers, input, buttons and these will be styled. In addition, you will be able to use the full power of Tailwind CSS for structuring. 
<script src="https://wireframes.salteadorneo.dev/cdn/wireframes.js"></script>
Example 
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://wireframes.salteadorneo.dev/cdn/wireframes.js"></script>
</head>

<body>
    <main class="container mx-auto p-4">
        <h1 class="text-2xl font-medium">Login</h1>
        <input placeholder="Username"></input>
        <input placeholder="Password" type="password"></input>
        <button>Login</button>
    </main>
</body>

</html>
Contributing Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Blocks Code blocks are available for you to copy and paste into your project.
Components The following components are available in the library.