Обзор
Компоненты
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Auth Surface
- Avatar
- Badge
- Browse Catalog Dialog
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Connector Setup Dialog
- Cookie Banner
- Dialog
- Directory Card
- Directory Detail
- Directory Skeleton
- DrawerНовое
- Token Parts Input
- Empty
- Field
- Fieldset
- File Preview Modal
- File Preview Skeleton
- Form
- Frame
- Group
- Icon
- Input
- Input Group
- Kbd
- Label
- Legal Shell
- Menu
- Mermaid Diagram
- Mind Map Diagram
- Not Found Screen
- Onboarding Frame
- Popover
- PDF Thumbnail
- Personalization Landing
- Preview Card
- Pricing Page
- Progress
- Radio Group
- Ring Spinner
- Scroll Area
- Select
- Separator
- Settings Page
- Settings Skills
- Settings Connectors
- Settings Capabilities
- Settings Usage
- Settings Account
- Settings Billing
- Sheet
- Sidebar
- Skeleton
- Skill Create Dialog
- Slider
- Spinner
- Stat
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Tooltip
AI-компоненты
- Компоненты AI
- Chat Conversation
- Chat Message
- Chat Response
- Chat Suggestion
- Chat Prompt Input
- Slash Highlighted Textarea
- Chat Search Dialog
- Chat Skill Doc
- Chat Connector Detail
- Chat Attachments
- Chat File Card
- Chat Token Chip
- Chat Code Block
- Chat Image
- Chat Inline Citation
- Chat Sources
- Chat Web Search
- Chat Research
- Chat Source
- Chat Actions
- Chat Context
- Chat Loader
- Chat Compaction
- Chat Timeline
- Chat Snippet
- Chat Terminal
- Chat Stack Trace
- Chat Test Results
- Chat File Tree
- Chat Environment Variables
- Chat Audio Player
- Chat Transcription
- Chat Speech Input
- Chat Mic Selector
- Chat Voice Selector
- Chat Agent
- Chat Persona
- Chat Connection
- Chat Connector Suggestion
- Chat Queue
- Chat Checkpoint
- Chat Confirmation
- Chat Artifact
- Chat JSX Preview
- Chat Schema Display
- Chat Package Info
- Chat Commit
- Chat Plan
- Chat Open In Chat
- Chat Sandbox
- Chat Model Selector
- Chat Canvas
- Chat Node
- Chat Edge
Ресурсы
Preview Card
Всплывающее окно, появляющееся при наведении на ссылку и показывающее предпросмотр для зрячих пользователей.
import { IconCornerUpLeft, IconStar } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";
import {
PreviewCard,
PreviewCardPopup,
PreviewCardTrigger,
} from "@/components/ui/preview-card";
export default function Particle() {
return (
<PreviewCard>
<PreviewCardTrigger render={<Button variant="ghost" />}>
localhost:4001/ui
</PreviewCardTrigger>
<PreviewCardPopup>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-1">
<h4 className="font-medium text-sm">localhost:4001/ui</h4>
<p className="text-muted-foreground text-sm">
Красиво оформленные компоненты, которые можно скопировать и
вставить в свои приложения.
</p>
</div>
<div className="flex items-center gap-4 text-muted-foreground text-xs">
<div className="flex items-center gap-1">
<span
aria-hidden="true"
className="size-2 rounded-full bg-blue-500"
/>
<span>TypeScript</span>
</div>
<div className="flex items-center gap-1">
<IconStar className="size-3" stroke={1.5} />
<span>58.2k</span>
</div>
<div className="flex items-center gap-1">
<IconCornerUpLeft className="size-3" stroke={1.5} />
<span>5.1k</span>
</div>
</div>
</div>
</PreviewCardPopup>
</PreviewCard>
);
}
Установка
pnpm dlx shadcn@latest add @oracul/preview-card
Использование
import { Button } from "@/components/ui/button"
import {
PreviewCard,
PreviewCardPopup,
PreviewCardTrigger,
} from "@/components/ui/preview-card"<PreviewCard>
<PreviewCardTrigger>Open Preview Card</PreviewCardTrigger>
<PreviewCardPopup>Preview Card Content</PreviewCardPopup>
</PreviewCard>API
PreviewCard
Корневой компонент. Псевдоним для PreviewCard.Root из Base UI.
PreviewCardTrigger
Элемент-триггер, показывающий карточку предпросмотра при наведении. Псевдоним для PreviewCard.Trigger из Base UI.
PreviewCardPopup
Контейнер всплывающего окна, отображающий содержимое предпросмотра. Также экспортируется как HoverCardContent.
| Свойство | Тип | По умолчанию | Описание |
|---|---|---|---|
align | "start" | "center" | "end" | "center" | Выравнивание относительно триггера |
sideOffset | number | 4 | Расстояние от триггера в пикселях |
portalProps | PreviewCard.Portal.Props | - | Свойства, передаваемые во внутренний портал (keepMounted, container и т. д.); см. API портала Preview Card в Base UI |