海外资源测评导航
返回开发工具 海外资源 / 开发工具 / 前端UI组件库 / data-slot.com
D
🔧 开发工具 前端UI组件库 未知总部 国内优化

data-slot.com

原生JS无头UI库

7.0/10 中国可用
TTG4G 编辑组 ·更新于 2026-06-08 ·数据来源: ai_crawl 评测方法 ↗
数据来源
ai_crawl · 最近更新 2026-06-08
行业深度解析AI 深度分析
一句话面向原生 JavaScript 的 headless UI 组件库,通过 data-slot 属性为 HTML 标记绑定交互行为。
定价免费/开源可能 抓取文本未提供收费信息;页面提供 GitHub 与 npm 链接,支持按需安装 npm 包。
适合谁前端开发者、偏好原生 HTML/JavaScript 的团队、希望避免框架绑定并自行控制样式的 UI 开发者
核心功能基于 data-slot 属性的 headless UI 交互绑定支持按组件独立安装无依赖、体积小、可 tree-shake提供 Tabs、Dialog、Accordion、Tooltip、Dropdown、Command、Select、Combobox 等组件支持键盘导航、焦点管理和 WAI-ARIA 模式支持 CSS 与 Tailwind 示例提供 create()、createTabs() 等编程式控制 API
功能与用途data-slot 是一个面向 vanilla JavaScript 的 headless UI 库。它通过 HTML 中的 data-slot 属性识别组件结构,再调用 create() 或具体组件创建函数绑定行为。组件覆盖 navigation-menu、dropdown-menu、command、select、combobox、accordion、slider、tooltip、tabs、popover、dialog、switch、alert-dialog、collaps
支持语言/框架主要面向原生 JavaScript 和 HTML;页面强调无需框架、无需虚拟 DOM、无需构建步骤。示例提供普通 CSS 与 Tailwind 两种模式。
开源还是闭源页面有 GitHub 与 npm 链接,但抓取文本未明确许可证或开源协议。
自托管选项作为 npm 包安装使用,可集成到自有前端项目中;未涉及服务端托管。
定价抓取文本未提供收费或商业计划信息。
API/SDK提供 npm 包,如 @data-slot/tabs、@data-slot/dialog 等。API 示例包括 import { create }、createTabs(element)、tabs.select('two')、tabs.destroy()、createAccordion(element,{multiple:true})、createAlertDialog(root) 等。
集成与生态发布为多个独立 npm 包,可按需安装;页面展示 GitHub、npm 入口。与 Tailwind 的 data-state/data-open 等样式写法兼容,适合和自定义 CSS 或 Tailwind 组合。
文档质量抓取文本包含包列表、安装命令、Quick Start、交互式示例和源码片段,示例较具体;但未见完整 API 参考、浏览器兼容性、许可证、贡献指南或版本策略等信息。
中国访问未知
适用场景构建无需框架绑定的交互组件、为静态站点或轻量 Web 应用添加可访问 UI、搭建设计系统底层行为层、在 Tailwind/CSS 项目中自定义组件外观
同类Radix UI、Headless UI、Ariakit、Floating UI、shadcn/ui、Shoelace
性价比8
易用7
服务5
综合7
优点
  • 不依赖 React/Vue 等框架,适合原生 HTML 场景
  • 组件包体积较小,且可按需安装
  • 样式完全由使用者控制,适合设计系统定制
  • 示例覆盖 HTML、CSS、JS 与 Tailwind 写法
  • 强调可访问性、键盘导航与焦点管理
不足
  • 抓取内容未显示完整 API 文档、版本兼容策略或维护状态
  • headless 模式需要开发者自行编写样式,开箱即用程度不如成品 UI 库
  • 生态与第三方集成信息较少
  • 未见企业支持、SLA 或商业服务说明

深度测评

TG4G · 2026-06-08 更新 · 仅供参考

是什么

data-slot 是一个面向原生 JavaScript 的 headless UI 组件库。它不提供固定视觉样式,而是通过 HTML 标记中的 data-slot 属性识别组件结构,再由 create() 或具体组件函数绑定交互行为。页面显示当前版本为 0.2.166,并提供 GitHub 与 npm 入口。

核心能力

组件覆盖较广,包括 tabs、dialog、alert-dialog、accordion、collapsible、tooltip、popover、dropdown-menu、navigation-menu、command、select、combobox、slider、switch 等。各包体积从约 1.6KB 到 10.3KB 不等,并强调“只安装需要的包”。示例中可见 createTabs(element)tabs.select()destroy()createAccordion(element,{ multiple:true }) 等编程式 API。

它的定位明显区别于 React 类 headless 方案:页面明确说明无需框架、无需虚拟 DOM、无需构建步骤,适合 vanilla HTML/JS。样式层面同时展示普通 CSS 与 Tailwind 写法,并通过 data-statedata-open、CSS 变量等机制让开发者自行控制外观和动画。

定价与开放性

抓取文本未提供任何收费计划、商业授权或支付方式信息。页面出现 GitHub 和 npm 链接,但未明确许可证,因此不能仅凭文本确认其开源协议。作为 npm 包,它可直接集成进自有前端项目,服务端自托管并非其主要问题。

优缺点

优点是轻量、无依赖、组件可按需安装,且强调 WAI-ARIA、键盘导航和焦点管理,适合构建设计系统的行为层。示例非常贴近实际代码,HTML/CSS/JS/Tailwind 都有展示。

不足是文档信息仍偏示例驱动,抓取内容未看到完整 API 参考、浏览器兼容性、许可证、维护节奏、社区规模或企业支持说明。headless 模式也意味着开发者需要自行完成样式与部分业务逻辑封装。

适合谁与中国访问

它适合偏好原生 Web 技术、静态站点、轻量应用、非 React 项目,以及希望完全掌控 DOM 与样式的前端团队。若团队需要现成视觉组件,可能更适合 shadcn/ui、Shoelace 等替代品。中国访问情况文本未提供,npm/GitHub 依赖在国内可能受网络环境影响,建议结合镜像源或代理评估。

本测评基于公开资料整理,不构成购买建议,请以 data-slot.com 官网实际信息为准。

中文卖点

轻量、可访问、无样式,提供GitHub/npm。

官网快照

/shot/data-slot-com.png
data-slot.com

价格走势

当前价 · 仅供参考
价格未公开 当前定价
价格采集自官网公开页面,实时更新;历史走势数据采集中,暂无足够历史样本。下单请以官网实时价为准。

用户评价

综合评分
7.0/10
TG4G 综合评分

评分明细(分布与用户短评)接入中。当前展示 TG4G 综合评分,数据源自公开测评与用户反馈。

常见问题

data-slot.com 是一家未知的开发工具 (前端UI组件库)服务商. 本页收录其「原生JS无头UI库」套餐. 轻量、可访问、无样式,提供GitHub/npm.
data-slot.com 在中国大陆有较好的直连体验, 多数地区无需代理即可访问. 该商家总部位于未知, 主要面向海外市场.
访问 data-slot.com 官网完成注册即可使用. 注册一般需要邮箱 (推荐 Gmail/Outlook) 和支付方式. 多数海外服务支持信用卡 / PayPal / 加密货币. 完整流程见本页"前往官网"按钮.

浏览其他大类