Plug-n-play 即插即用
UI component library for Tailwind CSS & Alpine JS
https://www.penguinui.com/
https://www.penguinui.com/docs/getting-started

Penguin UI是一个基于Tailwind CSS和Alpine JS的UI组件库，其目标是帮助用户快速轻松地开展项目。

  1. 主要特点

    • 易于使用：无需安装，可直接复制粘贴组件代码，有大量定制选项。
    • 主题多样：提供多种现成主题并可个性化定制，支持黑暗模式，能编辑黑暗模式下的颜色。
    • 注重无障碍性：确保组件可访问，提供颜色对比度检查器辅助选择主题颜色。
    • 响应式设计：组件在各种设备上显示效果良好，自适应屏幕尺寸。
    • 广泛的浏览器支持：支持谷歌Chrome、微软Edge、Safari和火狐浏览器。
  2. 组件丰富：包含按钮、链接、下拉菜单、侧边栏、范围选择器、头像、横幅、微调器、徽章、导航栏、选择框、评分、进度条、分页、模态框、复选框、组合框、表格、文本输入、步骤条、轮播、通知提示、切换开关、聊天泡泡、工具提示、键盘按键、单选框、文本区域、标签页、手风琴、计数器、文件输入、卡片、面包屑导航、骨架屏、警告框等组件。
  3. 主题风格：提供Arctic（北极）、Modern（现代）、Minimal（极简）、Halloween II（万圣节II）、Neo Brutalism（新粗野主义）、Pastel（柔和）等多种主题风格，便于用户根据需求定制项目样式。

快速上手

<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

接下就是愉快的复制粘贴了。

标签: Alpine.js, TailwindCSS

评论已关闭