Htmlcn

htmlcn

Use htmlcn to build static prototypes with ordinary HTML, shadcn-style component class names, and the shared runtime files in lib/.

Imports

For pages served from the repository root:

<link rel="stylesheet" href="./lib/htmlcn.css">
<script src="./lib/htmlcn.js" defer></script>

For examples in this skill:

<link rel="stylesheet" href="../../../lib/htmlcn.css">
<script src="../../../lib/htmlcn.js" defer></script>

Component Rules

• Use h- plus the exact shadcn component export name and casing, such as h-Button, h-CardHeader, and h-DropdownMenuItem.
• Use modifier classes for variants and sizes, such as h-Button--outline, h-Button--destructive, h-Button--sm, and h-TabsList--line.
• Use data-h-* attributes for behavior and state configuration, such as data-h-target, data-h-value, data-h-default-value, and data-h-name.
• Do not write runtime-managed data-h-state unless intentionally mocking an initial open or active state.
• Use native HTML attributes where useful: id, for, name, value, type, placeholder, disabled, and hidden.
• Use inline CSS for page-specific layout. Do not invent layout helper classes like h-Stack, h-Grid, h-Page, or h-Container.

Selection Guidance

• Use NativeSelect for ordinary form dropdowns.
• Use Select for styled custom dropdowns without search.
• Use Combobox for searchable selection, autocomplete, or large option lists.
• Use Command for command palettes, app action search, and global navigation search.

Icons

Use Tabler React component names in data-icon:

<span class="h-Icon" data-icon="IconSearch"></span>
<span class="h-Icon" data-icon="IconSettings"></span>

For uncommon icons, add data-icon-fetch or configure window.htmlcn.icons.fetchMissing = true before loading lib/htmlcn.js.

Examples

Reference examples are in examples/:

• examples/kitchen-sink.html
• examples/component-audit.html
• examples/dashboard.html
• examples/form-controls.html
• examples/ghostex-process-popover.html