OrangeUI - A ShadcnUI like Components

OrangeUI，一个仿 ShadcnUI 的常用基本组件库

OrangeUI 是一个给 Html 页面使用的仿 ShadcnUI 的常用基本组件库，用于日常快速创建 ShadcnUI 风格的 Html 页面。

原版直达：https://ui.shadcn.com/

使用教程

1、下载css和js文件

  • base.min.css
  • base.min.js

    • 2、粘贴元素，按照自己的需求修改

    Buttons

    link link

    Input

    Card

    Card Title

    This is the content of the card. You can put any HTML here.

    Dialog

    Checkbox

    Select

    Badge

    New Secondary

    Alert

    Progress

    Tabs

    Tab 1
    Tab 2
    Tab 3
    Content for Tab 1
    Content for Tab 2
    Content for Tab 3

    Tooltip

    Hover me This is a tooltip

    Accordion

    Section 1
      Content for section 1
    Section 2
      Content for section 2

    Dropdown

    Link 1 Link 2 Link 3

    Switch

    Table

    Name Email Role
    John Doe john@example.com Developer
    Jane Smith jane@example.com Designer
    Bob Johnson bob@example.com Manager
    Alice Brown alice@example.com Tester

    Divider

    Horizontal Divider

    This is some content above the divider.

    This is some content below the divider.

    Divider with Text

    This is some content above the divider with text.

    Divider with Text

    This is some content below the divider with text.

    Vertical Divider

    Left content
    Right content

    Message

    🌓 ▲