Björk UI

UI32

47 Accordion 48 Alerts 49 Avatar 50 Badge 51 Breadcrumb 52 Button 53 Button Group 54 Calendar 55 Card 56 Checkbox 57 Collapsible 58 Combobox 59 Data Table 60 Date Picker 61 Dialog 62 Dropdown Menu 63 Form 64 Input 65 Input Mask 66 Input OTP 67 Pagination 68 Popover 69 Radio Group 70 Select 71 Sheet 72 Slider 73 Sonner 74 Switch 75 Table 76 Tabs 77 Textarea 78 Tooltip

Charts1

01 Animated radial chart

Interactive3

02 Message dock 03 Voice powered orb 07 Draggable rope

AI1

13 AI voice input

Galleries3

04 Ruler carousel 10 Portfolio gallery 32 Hover image gallery

Heroes1

05 Video scroll hero

Shaders2

80 Aurora veil 88 Kinetic dots

Tables5

06 Financial table 43 Contacts table 44 Leads table 45 Resizable table 46 Server management

Cards15

11 Video upload card 16 Animated card options 17 Animated card status list 18 Audio upload card 19 Bonuses incentives card 20 Coach scheduling 21 Dashboard card modal 22 Event countdown card 23 Hover detail card 24 News cards 25 Onboarding stages 26 Prediction market card 27 Product reveal card 28 Profile hover card 29 Project cards

Badges1

14 Animated status badge

Buttons1

15 Animated download

Controls1

31 Gradient selector

HUD7

09 HUD frame 34 Glitchy 404 35 Overlay 2 36 HUD button 37 HUD graph 38 HUD status 40 Warning graphic

Text1

Components•Hover detail card

Components•Hover detail card

Hover detail card

A hover detail card for collection tiles, archive actions, and compact media metadata.

Dependencies

Copy below cli

npx shadcn add @bjork-ui/hover-detail-card

How to use

import { HoverDetailCard } from "@/components/bjork-ui/cards/hover-detail-card";export function Demo() {  return <HoverDetailCard />;}

PreviousEvent countdown card NextNews cards

Studio shots 1

Studio shots 2

Studio shots 3

Studio shots 4

Studio shots 5

Studio shots 6

Studio shots 7

Studio shots 8

Studio shots 9

Studio shots 10

1×1

Published

Studio shots

52 tiles