- 手风琴 (Accordion)
- 警示框 (Alert)
- 对话框 (Alert Dialog)
- 宽高比 (Aspect Ratio)
- 头像 (Avatar)
- 徽章 (Badge)
- 面包屑 (Breadcrumb)
- 按钮 (Button)
- 按钮组 (Button Group)
- 日历 (Calendar)
- 卡片 (Card)
- 轮播 (Carousel)
- 图表 (Chart)
- 复选框 (Checkbox)
- 折叠面板 (Collapsible)
- 组合框 (Combobox)
- 命令栏 (Command)
- 上下文菜单 (Context Menu)
- 数据表格 (Data Table)
- 日期选择器 (Date Picker)
- 对话框 (Dialog)
- 方向 (Direction)
- 抽屉 (Drawer)
- 下拉菜单 (Dropdown Menu)
- 空状态 (Empty)
- 字段 (Field)
- 悬浮卡片 (Hover Card)
- 输入框 (Input)
- 输入框组 (Input Group)
- OTP 输入框 (Input OTP)
- 项目 (Item)
- 快捷键 (Kbd)
- 标签 (Label)
- 菜单栏 (Menubar)
- 原生选择框 (Native Select)
- 导航菜单 (Navigation Menu)
- 分页 (Pagination)
- 气泡卡片 (Popover)
- 进度条 (Progress)
- 单选组 (Radio Group)
- 可调节大小 (Resizable)
- 滚动区域 (Scroll Area)
- 选择框 (Select)
- 分隔线 (Separator)
- 侧边栏 (Sheet)
- 导航侧边栏 (Sidebar)
- 骨架屏 (Skeleton)
- 滑块 (Slider)
- Sonner (吐司通知)
- 加载器 (Spinner)
- 开关 (Switch)
- 表格 (Table)
- 标签页 (Tabs)
- 文本域 (Textarea)
- 吐司 (Toast)
- 切换按钮 (Toggle)
- 切换组 (Toggle Group)
- 文字提示 (Tooltip)
- 排版 (Typography)
我们默认不提供任何排版样式。此页面演示了如何使用实用类来修饰您的文本。
笑声税:笑话税纪事
很久以前,在一个遥远的国度里,有一位非常懒惰的国王,他整天躺在王座上。有一天,顾问们向他提出了一个问题:王国快没钱了。
国王的计划
国王冥思苦想,最终想出了 一个天才计划:他要对王国里的笑话征税。
“毕竟,”他说,“每个人都喜欢好笑话,所以让他们为这份快乐付费是公平的。”
笑话税
国王的臣民们对此并不买账。他们抱怨连连,但国王态度坚决
- 一级双关语:5 枚金币
- 二级笑话:10 枚金币
- 三级单口段子:20 枚金币
结果,人们不再讲笑话了,王国陷入了忧郁之中。但有一个人拒绝让国王的愚蠢打倒自己:一个名叫乔克斯特的宫廷小丑。
乔克斯特的起义
乔克斯特开始在深夜溜进城堡,到处留下笑话:在国王的枕头下、在他的汤里,甚至在御用厕所里。国王勃然大怒,却似乎无法阻止乔克斯特。
后来有一天,王国的人民发现乔克斯特留下的笑话太搞笑了,以至于他们忍不住大笑起来。一旦他们开始大笑,就停不下来了。
人民的反抗
王国的人民被笑声所鼓舞,开始再次讲笑话和双关语,很快整个王国都参与到了这个笑话中。
| 国王的国库 | 人民的幸福感 |
|---|---|
| 空状态 | 溢出 |
| 适中 | 满足 |
| 充盈 | 狂喜 |
国王看到臣民们变得如此快乐,意识到了自己的错误,并废除了笑话税。乔克斯特被宣布为英雄,王国从此过上了幸福的生活。
这个故事的寓意是:永远不要低估笑声的力量,并且要时刻警惕糟糕的决定。
h1
笑声税:笑话税纪事
export function TypographyH1() {
return (
<h1 className="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">h2
王国的人民
export function TypographyH2() {
return (
<h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">h3
笑话税
export function TypographyH3() {
return (
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">h4
人们不再讲笑话
export function TypographyH4() {
return (
<h4 className="scroll-m-20 text-xl font-semibold tracking-tight">p
国王看到臣民们变得如此快乐,意识到了自己的错误,并废除了笑话税。
export function TypographyP() {
return (
<p className="leading-7 [&:not(:first-child)]:mt-6">blockquote
“毕竟,”他说,“每个人都喜欢好笑话,所以让他们为这份快乐付费是公平的。”
export function TypographyBlockquote() {
return (
<blockquote className="mt-6 border-l-2 pl-6 italic">table
| 国王的国库 | 人民的幸福感 |
|---|---|
| 空状态 | 溢出 |
| 适中 | 满足 |
| 充盈 | 狂喜 |
export function TypographyTable() {
return (
<div className="my-6 w-full overflow-y-auto">list
- 一级双关语:5 枚金币
- 二级笑话:10 枚金币
- 三级单口段子:20 枚金币
export function TypographyList() {
return (
<ul className="my-6 ml-6 list-disc [&>li]:mt-2">行内代码
@radix-ui/react-alert-dialogexport function TypographyInlineCode() {
return (
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">Lead (引导文)
一个模态对话框,用于通过重要内容中断用户并期望其做出响应。
export function TypographyLead() {
return (
<p className="text-xl text-muted-foreground">大尺寸
export function TypographyLarge() {
return <div className="text-lg font-semibold">Are you absolutely sure?</div>
}小尺寸
export function TypographySmall() {
return (
<small className="text-sm leading-none font-medium">Email address</small>Muted (静音/灰色文本)
请输入您的电子邮箱地址。
export function TypographyMuted() {
return (
<p className="text-sm text-muted-foreground">Enter your email address.</p>RTL (从右至左)
要在 shadcn/ui 中启用 RTL 支持,请参阅 RTL 配置指南。
对笑声征税:笑话税纪事
在很久以前,在一个遥远的国度里,有一位非常懒惰的国王,他整天躺在王座上。有一天,顾问们向他提出了一个问题:王国快没钱了。
国王的计划
国王苦思冥想,最终想出了 一个天才计划:他要对王国里的笑话征税。
“毕竟,”他说,“每个人都喜欢好笑话,所以让他们为这份快乐付费是公平的。”
笑话税
国王的臣民们对此并不买账。他们抱怨连连,但国王态度坚决
- 一级双关语:5 枚金币
- 二级笑话:10 枚金币
- 三级单口段子:20 枚金币
结果,人们不再讲笑话了,王国陷入了忧郁之中。但有一个人拒绝让国王的愚蠢打倒自己:一个名叫“逗比”的宫廷小丑。
“逗比”的起义
“逗比”开始在深夜溜进城堡,到处留下笑话:在国王的枕头下、在他的汤里,甚至在御用厕所里。国王勃然大怒,却似乎无法阻止他。
后来有一天,王国的人民发现“逗比”留下的笑话太搞笑了,以至于他们忍不住大笑起来。一旦他们开始大笑,就停不下来了。
人民的反抗
王国的人民被笑声所鼓舞,开始再次讲笑话和双关语,很快整个王国都参与到了这个笑话中。
| 国王的国库 | 人民的幸福感 |
|---|---|
| 空虚 | 溢出 |
| 适中 | 满足 |
| 充盈 | 狂喜 |
国王看到臣民们变得如此快乐,意识到了自己的错误,并废除了笑话税。“逗比”被宣布为英雄,王国从此过上了幸福的生活。
这个故事的寓意是:永远不要低估笑声的力量,并且要时刻警惕糟糕的决定。
"use client"
import * as React from "react"