---
name: "@bjork-ui"
slug: "bjork-ui"
description: "Production-ready animated interface components, primitives, and WebGL shader studies for React and Tailwind CSS."
category: "Animated components"
tags: ["3d", "ai", "animation", "audio", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "dashboard", "design-system", "forms", "hooks", "media", "navigation", "onboarding", "overlays", "tables"]
framework: "react"
license: null
author: null
website: "https://ui.isaiahbjork.com"
github: null
registry: "https://ui.isaiahbjork.com/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 74
generated_at: "2026-09-21T01:50:16.753Z"
---

# @bjork-ui

Production-ready animated interface components, primitives, and WebGL shader studies for React and Tailwind CSS.

## Links

- Website: https://ui.isaiahbjork.com
- Registry JSON: https://ui.isaiahbjork.com/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/bjork-ui
- This file: https://sh4dcn.vercel.app/md/bjork-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.isaiahbjork.com/registry.json
pnpm dlx shadcn@latest add https://ui.isaiahbjork.com/registry.json
bunx shadcn@latest add https://ui.isaiahbjork.com/registry.json
# fetch the raw registry index
curl -s https://ui.isaiahbjork.com/registry.json
```

## Components (74)

| name | type | description | install |
| --- | --- | --- | --- |
| animated-radial-chart | registry:component | Animated radial chart is a production-ready charts component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/animated-radial-chart.json` |
| message-dock | registry:component | Message dock is a production-ready interactive component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/message-dock.json` |
| voice-powered-orb | registry:component | Voice powered orb is a production-ready interactive component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/voice-powered-orb.json` |
| ruler-carousel | registry:component | Ruler carousel is a production-ready galleries component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/ruler-carousel.json` |
| video-scroll-hero | registry:component | Video scroll hero is a production-ready heroes component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/video-scroll-hero.json` |
| financial-table | registry:component | Financial table is a production-ready tables component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/financial-table.json` |
| draggable-rope | registry:component | Draggable rope is a production-ready interactive component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/draggable-rope.json` |
| hud-frame | registry:component | HUD frame is a production-ready hud component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/hud-frame.json` |
| portfolio-gallery | registry:component | Portfolio gallery is a production-ready galleries component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/portfolio-gallery.json` |
| video-upload-card | registry:component | Video upload card is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/video-upload-card.json` |
| ai-voice-input | registry:component | AI voice input is a production-ready ai component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/ai-voice-input.json` |
| animated-status-badge | registry:component | Animated status badge is a production-ready badges component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/animated-status-badge.json` |
| animated-download | registry:component | Animated download is a production-ready buttons component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/animated-download.json` |
| animated-card-options | registry:component | Animated card options is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/animated-card-options.json` |
| animated-card-status-list | registry:component | Animated card status list is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/animated-card-status-list.json` |
| audio-upload-card | registry:component | Audio upload card is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/audio-upload-card.json` |
| bonuses-incentives-card | registry:component | Bonuses incentives card is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/bonuses-incentives-card.json` |
| coach-scheduling | registry:component | Coach scheduling is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/coach-scheduling.json` |
| dashboard-card-modal | registry:component | Dashboard card modal is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/dashboard-card-modal.json` |
| event-countdown-card | registry:component | Event countdown card is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/event-countdown-card.json` |
| hover-detail-card | registry:component | Hover detail card is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/hover-detail-card.json` |
| news-cards | registry:component | News cards is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/news-cards.json` |
| onboarding-stages | registry:component | Onboarding stages is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/onboarding-stages.json` |
| prediction-market-card | registry:component | Prediction market card is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/prediction-market-card.json` |
| product-reveal-card | registry:component | Product reveal card is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/product-reveal-card.json` |
| profile-hover-card | registry:component | Profile hover card is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/profile-hover-card.json` |
| project-cards | registry:component | Project cards is a production-ready cards component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/project-cards.json` |
| gradient-selector | registry:component | Gradient selector is a production-ready controls component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/gradient-selector.json` |
| hover-image-gallery | registry:component | Hover image gallery is a production-ready galleries component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/hover-image-gallery.json` |
| reveal-text | registry:component | Reveal text is a production-ready text component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/reveal-text.json` |
| glitchy-404 | registry:component | Glitchy 404 is a production-ready hud component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/glitchy-404.json` |
| hud-2 | registry:component | Overlay 2 is a production-ready hud component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/hud-2.json` |
| hud-button | registry:component | HUD button is a production-ready hud component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/hud-button.json` |
| hud-graph | registry:component | HUD graph is a production-ready hud component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/hud-graph.json` |
| hud-status | registry:component | HUD status is a production-ready hud component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/hud-status.json` |
| warning-graphic | registry:component | Warning graphic is a production-ready hud component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/warning-graphic.json` |
| contacts-table | registry:component | Contacts table is a production-ready tables component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/contacts-table.json` |
| leads-table | registry:component | Leads table is a production-ready tables component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/leads-table.json` |
| resizable-table | registry:component | Resizable table is a production-ready tables component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/resizable-table.json` |
| server-management | registry:component | Server management is a production-ready tables component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/server-management.json` |
| primitive-accordion | registry:component | Accordion is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-accordion.json` |
| primitive-alerts | registry:component | Alerts is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-alerts.json` |
| primitive-avatar | registry:component | Avatar is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-avatar.json` |
| primitive-badge | registry:component | Badge is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-badge.json` |
| primitive-breadcrumb | registry:component | Breadcrumb is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-breadcrumb.json` |
| primitive-button | registry:component | Button is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-button.json` |
| primitive-button-group | registry:component | Button Group is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-button-group.json` |
| primitive-calendar | registry:component | Calendar is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-calendar.json` |
| primitive-card | registry:component | Card is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-card.json` |
| primitive-checkbox | registry:component | Checkbox is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-checkbox.json` |
| primitive-collapsible | registry:component | Collapsible is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-collapsible.json` |
| primitive-combobox | registry:component | Combobox is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-combobox.json` |
| primitive-data-table | registry:component | Data Table is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-data-table.json` |
| primitive-date-picker | registry:component | Date Picker is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-date-picker.json` |
| primitive-dialog | registry:component | Dialog is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-dialog.json` |
| primitive-dropdown-menu | registry:component | Dropdown Menu is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-dropdown-menu.json` |
| primitive-form | registry:component | Form is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-form.json` |
| primitive-input | registry:component | Input is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-input.json` |
| primitive-input-mask | registry:component | Input Mask is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-input-mask.json` |
| primitive-input-otp | registry:component | Input OTP is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-input-otp.json` |
| primitive-pagination | registry:component | Pagination is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-pagination.json` |
| primitive-popover | registry:component | Popover is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-popover.json` |
| primitive-radio-group | registry:component | Radio Group is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-radio-group.json` |
| primitive-select | registry:component | Select is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-select.json` |
| primitive-sheet | registry:component | Sheet is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-sheet.json` |
| primitive-slider | registry:component | Slider is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-slider.json` |
| primitive-sonner | registry:component | Sonner is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-sonner.json` |
| primitive-switch | registry:component | Switch is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-switch.json` |
| primitive-table | registry:component | Table is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-table.json` |
| primitive-tabs | registry:component | Tabs is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-tabs.json` |
| primitive-textarea | registry:component | Textarea is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-textarea.json` |
| primitive-tooltip | registry:component | Tooltip is a production-ready ui component from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/primitive-tooltip.json` |
| shader-aurora-veil | registry:component | Aurora veil is a compact WebGL website shader from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/shader-aurora-veil.json` |
| shader-kinetic-dots | registry:component | Kinetic dots is a compact WebGL website shader from BJORK UI, packaged for shadcn registries. | `npx shadcn@latest add https://ui.isaiahbjork.com/shader-kinetic-dots.json` |

## For AI agents

```text
You are adding components from @bjork-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/bjork-ui.md) for the component list.
2. Fetch the machine-readable index: https://ui.isaiahbjork.com/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: bjork-ui).
```