{"id":19002700,"url":"https://github.com/vimeshjs/vimesh-headless","last_synced_at":"2025-10-08T00:31:00.752Z","repository":{"id":64230387,"uuid":"572344992","full_name":"vimeshjs/vimesh-headless","owner":"vimeshjs","description":"Alpine.js implementation of Tailwind Headless UI","archived":false,"fork":false,"pushed_at":"2023-09-14T04:49:17.000Z","size":1674,"stargazers_count":101,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-16T09:06:15.228Z","etag":null,"topics":["alpinejs","headlessui","tailwind"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vimeshjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-30T04:11:23.000Z","updated_at":"2025-01-06T15:10:28.000Z","dependencies_parsed_at":"2024-11-16T07:03:49.124Z","dependency_job_id":"a4b9d7f7-f69a-4bc7-882c-634949dc2957","html_url":"https://github.com/vimeshjs/vimesh-headless","commit_stats":{"total_commits":25,"total_committers":2,"mean_commits":12.5,"dds":"0.040000000000000036","last_synced_commit":"1363109c85c9c432e50d0afb8a318fca09562e5d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimeshjs%2Fvimesh-headless","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimeshjs%2Fvimesh-headless/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimeshjs%2Fvimesh-headless/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vimeshjs%2Fvimesh-headless/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vimeshjs","download_url":"https://codeload.github.com/vimeshjs/vimesh-headless/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235665658,"owners_count":19026236,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpinejs","headlessui","tailwind"],"created_at":"2024-11-08T18:15:45.146Z","updated_at":"2025-10-08T00:31:00.371Z","avatar_url":"https://github.com/vimeshjs.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vimesh Headless UI\n## Features\nThis is Alpine.js implementation of [Tailwind Headless UI](https://headlessui.com/). Built with [Vimesh UI](https://github.com/vimeshjs/vimesh-ui) framework, Vimesh Headless UI has some nice features:\n### Ultra lightweight \nVimesh Headless UI has much smaller code size\n\n| Components   | Vimesh Headless UI   | Tailwind Headless UI for Vue | Tailwind Headless UI for React |\n| ----------- | -------------------- | -------- | ----- |\n| Listbox   | 8k  | 34k | 30k | \n| Combobox  | 9k  | 25k | 39k |\n| Menu      | 7k  | 18k | 20k |\n| Switch    | 0.6k | 5k | 6k |\n| Tabs      | 4k  | 12k | 16k |\n| Dialog    | 2k  | 15k | 17k |\n| Popover   | 6k  | 23k | 28k |\n| Radio Group | 1k | 11k | 14k |\n\nComparing the production version of Vimesh and Tailwind headless dialog example page size, Vimesh is much smaller with more features and less bugs (check the menu display in the tailwind popup dialog). \n\n* Vimesh (192k) \n![](./assets/vimesh001.png) \n* Tailwind (425k)\n![](./assets/tailwind001.png)\n\n### Load only used components dynamically\nComponents are plain html files, which could be hosted anywhere, normally at CDN. They could be shared cross different projects without extra tree shaking magic. For example, the dialog basic example uses two components `hui-dialog` and `hui-menu`. Just load them asynchronously with `x-import`. Vimesh UI registers corresponding native custom elements and initialize them.\n\n```html\n\u003ctemplate x-component:page=\"dialog-basic\" x-import=\"hui:dialog,menu\" x-data=\"setupDialogBasicData()\"\n    class=\"overflow-y-auto\"\u003e\n    ...\n    \u003chui-dialog :open=\"isOpen\" @close=\"setIsOpen(false)\"\u003e\n        ...\n        \u003chui-menu\u003e\n        \u003c/hui-menu\u003e\n    \u003c/hui-dialog\u003e\n    ...\n\u003c/template\u003e\n```\n\n### No build, no bundle\nWhat you write is what you get. Organize components to html files under meaningful namespaces. You do not need webpack, rollup, vite etc. \n\n## Getting Started\n### Development mode\nInstall development dependencies, including alpinejs, @vimesh/style, @vimesh/ui, universal-router and http-server.\n```\nyarn\n```\nRun static http server\n```\nyarn dev\n```\nOpen the url `http://127.0.0.1:8080/playground/dev.html`\n\nIt shows an index page\n![](./assets/vimesh002.jpg)\n\nThere are many examples for different components with relative source code.\n\n![](./assets/vimesh003.jpg)\n\nIt uses development version of alpinejs and @vimesh/ui in the node_modules folder. \n\n### Production mode\nPlease check `playground/index.html`, which use the latest alpinejs and @vimesh/ui at `unpkg.com`. In fact it is also what you would do if you use Vimesh Headless UI in your real projects.\n``` html\n\u003chead\u003e\n    \u003clink rel=\"icon\" type=\"image/x-icon\" href=\"./assets/favicon.ico\"\u003e\n\n    \u003cscript src=\"https://unpkg.com/@vimesh/style\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/@vimesh/ui\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/alpinejs\" defer\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/universal-router/universal-router.min.js\"\u003e\u003c/script\u003e\n\n    \u003cscript\u003e\n        const DEBUG = false\n        $vui.config.debug = DEBUG\n        $vui.config.importMap = {\n            \"hui\": '../components/${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),\n            \"app\": './components/${path}${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),\n            \"page\": './pages/${path}${component}.html' + (DEBUG ? '?v=' + new Date().valueOf() : '?v=0.1'),\n        }\n    \u003c/script\u003e\n    ...\n\u003c/head\u003e\n```\n\n[Online Playground](https://unpkg.com/@vimesh/headless/playground/index.html)\n\nYes, the online playground are 100% plain html hosted at `unpkg.com`. It is very old school style, right? Let's make frondend development back to what it should be.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvimeshjs%2Fvimesh-headless","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvimeshjs%2Fvimesh-headless","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvimeshjs%2Fvimesh-headless/lists"}