---
name: "@balick"
slug: "balick"
description: "Blocks for shadcn/ui designed to fit together: compose a page, then install it with one command."
category: "Animated components"
tags: ["animation", "backgrounds", "blocks", "buttons", "cards", "cms", "icons", "loaders", "marketing", "navigation", "pro-available", "retro", "text-effects", "theming"]
framework: "react"
license: "MIT"
author: "balick"
website: "https://ui.balick.me"
github: "https://github.com/balick/balick-ui"
registry: "https://ui.balick.me/r/registry.json"
pro: true
pro_url: "https://ui.balick.me/blocks/pricing#pricing-01"
github_stars: 1
component_count: 129
generated_at: "2026-10-10T06:32:55.998Z"
---

# @balick

Blocks for shadcn/ui designed to fit together: compose a page, then install it with one command.

## Links

- Website: https://ui.balick.me
- GitHub: https://github.com/balick/balick-ui
- Registry JSON: https://ui.balick.me/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/balick
- This file: https://sh4dcn.vercel.app/md/balick.md
- Pro / pricing: https://ui.balick.me/blocks/pricing#pricing-01

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.balick.me/r/registry.json
pnpm dlx shadcn@latest add https://ui.balick.me/r/registry.json
bunx shadcn@latest add https://ui.balick.me/r/registry.json
# clone the source repo
git clone https://github.com/balick/balick-ui.git
# fetch the raw registry index
curl -s https://ui.balick.me/r/registry.json
```

## Components (129)

| name | type | description | install |
| --- | --- | --- | --- |
| theme | registry:theme | The monochrome colour palette, radius and dark mode used by every Balick UI component and block. | `npx shadcn@latest add https://ui.balick.me/r/theme.json` |
| marquee | registry:ui | An infinite scrolling track for logos, testimonials or anything else. | `npx shadcn@latest add https://ui.balick.me/r/marquee.json` |
| blur-fade | registry:ui | Reveal content with a soft blur and fade, on mount or when scrolled into view. | `npx shadcn@latest add https://ui.balick.me/r/blur-fade.json` |
| shimmer-button | registry:ui | A button with a beam of light travelling around its border. | `npx shadcn@latest add https://ui.balick.me/r/shimmer-button.json` |
| grid-pattern | registry:ui | A lightweight SVG grid background with optional highlighted cells. | `npx shadcn@latest add https://ui.balick.me/r/grid-pattern.json` |
| dot-pattern | registry:ui | A grid of dots, with a few that glow in turn. | `npx shadcn@latest add https://ui.balick.me/r/dot-pattern.json` |
| flickering-grid | registry:ui | A field of small squares that flicker at random, drawn on a canvas. | `npx shadcn@latest add https://ui.balick.me/r/flickering-grid.json` |
| retro-grid | registry:ui | A grid floor in perspective that slides toward the horizon. | `npx shadcn@latest add https://ui.balick.me/r/retro-grid.json` |
| ripple | registry:ui | Concentric rings that breathe from the center, behind a logo or a button. | `npx shadcn@latest add https://ui.balick.me/r/ripple.json` |
| light-rays | registry:ui | Soft rays of light that fan down from the top and sway slowly. | `npx shadcn@latest add https://ui.balick.me/r/light-rays.json` |
| aurora | registry:ui | Veils of light that drift slowly across the top of a section. | `npx shadcn@latest add https://ui.balick.me/r/aurora.json` |
| grain | registry:ui | A paper grain that gives flat surfaces some texture. | `npx shadcn@latest add https://ui.balick.me/r/grain.json` |
| interactive-grid | registry:ui | A grid whose cells light up under the pointer and fade out behind it. | `npx shadcn@latest add https://ui.balick.me/r/interactive-grid.json` |
| wave-lines | registry:ui | Thin lines that ripple like silk and part around the pointer. | `npx shadcn@latest add https://ui.balick.me/r/wave-lines.json` |
| section | registry:ui | Layout primitives shared by every block: Section, Container and SectionHeader. | `npx shadcn@latest add https://ui.balick.me/r/section.json` |
| social-icons | registry:ui | Brand icons for social links (GitHub, LinkedIn, X, YouTube), which lucide-react no longer ships. | `npx shadcn@latest add https://ui.balick.me/r/social-icons.json` |
| status-dot | registry:ui | A small live indicator with a pulsing halo, in four tones. | `npx shadcn@latest add https://ui.balick.me/r/status-dot.json` |
| segmented-control | registry:ui | A single choice between a few options, with a pill that slides to the selected one. | `npx shadcn@latest add https://ui.balick.me/r/segmented-control.json` |
| animated-number | registry:ui | A number that rolls up or down to its new value when it changes. | `npx shadcn@latest add https://ui.balick.me/r/animated-number.json` |
| number-ticker | registry:ui | Counts up to a number once, when it scrolls into view. | `npx shadcn@latest add https://ui.balick.me/r/number-ticker.json` |
| arrow-button | registry:ui | A button or link whose arrow nudges forward on hover and focus. | `npx shadcn@latest add https://ui.balick.me/r/arrow-button.json` |
| copy-button | registry:ui | Copies a text to the clipboard; the icon turns into a check mark. | `npx shadcn@latest add https://ui.balick.me/r/copy-button.json` |
| status-button | registry:ui | A button that shows the progress of its action: idle, loading, success or error. | `npx shadcn@latest add https://ui.balick.me/r/status-button.json` |
| hold-button | registry:ui | Hold to confirm, for actions that are hard to undo. | `npx shadcn@latest add https://ui.balick.me/r/hold-button.json` |
| text-roll-button | registry:ui | On hover, the label rolls up and an identical copy takes its place. | `npx shadcn@latest add https://ui.balick.me/r/text-roll-button.json` |
| magnetic-button | registry:ui | A button that leans a few pixels towards the pointer. | `npx shadcn@latest add https://ui.balick.me/r/magnetic-button.json` |
| ripple-button | registry:ui | A button that sends a soft ripple out from where it is pressed. | `npx shadcn@latest add https://ui.balick.me/r/ripple-button.json` |
| spotlight-button | registry:ui | A soft light follows the pointer inside the button. | `npx shadcn@latest add https://ui.balick.me/r/spotlight-button.json` |
| expand-button | registry:ui | An icon button whose label slides out on hover and focus. | `npx shadcn@latest add https://ui.balick.me/r/expand-button.json` |
| theme-toggle-button | registry:ui | Switches between light and dark; the sun grows into a moon. | `npx shadcn@latest add https://ui.balick.me/r/theme-toggle-button.json` |
| word-rotate | registry:ui | Cycles through words in place, each one sliding up into view. | `npx shadcn@latest add https://ui.balick.me/r/word-rotate.json` |
| text-reveal | registry:ui | Reveals a line word by word, each part fading in from a light blur. | `npx shadcn@latest add https://ui.balick.me/r/text-reveal.json` |
| typewriter | registry:ui | Types phrases character by character, with a blinking caret. | `npx shadcn@latest add https://ui.balick.me/r/typewriter.json` |
| scramble-text | registry:ui | Letters start scrambled and settle one after the other. | `npx shadcn@latest add https://ui.balick.me/r/scramble-text.json` |
| shimmer-text | registry:ui | A light sweeps across the text, for work in progress. | `npx shadcn@latest add https://ui.balick.me/r/shimmer-text.json` |
| highlight-text | registry:ui | A marker stroke draws behind the words once they scroll into view. | `npx shadcn@latest add https://ui.balick.me/r/highlight-text.json` |
| underline-link | registry:ui | A link whose underline draws in on hover and focus. | `npx shadcn@latest add https://ui.balick.me/r/underline-link.json` |
| expandable-text | registry:ui | Long text clamped to a few lines, with a button that unfolds the rest. | `npx shadcn@latest add https://ui.balick.me/r/expandable-text.json` |
| countdown | registry:ui | Days, hours, minutes and seconds left until a date, each rolling to its new value. | `npx shadcn@latest add https://ui.balick.me/r/countdown.json` |
| marquee-demo | registry:example | Example usage of Marquee. | `npx shadcn@latest add https://ui.balick.me/r/marquee-demo.json` |
| blur-fade-demo | registry:example | Example usage of Blur Fade. | `npx shadcn@latest add https://ui.balick.me/r/blur-fade-demo.json` |
| shimmer-button-demo | registry:example | Example usage of Shimmer Button. | `npx shadcn@latest add https://ui.balick.me/r/shimmer-button-demo.json` |
| status-dot-demo | registry:example | Example usage of Status Dot. | `npx shadcn@latest add https://ui.balick.me/r/status-dot-demo.json` |
| segmented-control-demo | registry:example | Example usage of Segmented Control. | `npx shadcn@latest add https://ui.balick.me/r/segmented-control-demo.json` |
| animated-number-demo | registry:example | Example usage of Animated Number. | `npx shadcn@latest add https://ui.balick.me/r/animated-number-demo.json` |
| number-ticker-demo | registry:example | Example usage of Number Ticker. | `npx shadcn@latest add https://ui.balick.me/r/number-ticker-demo.json` |
| grid-pattern-demo | registry:example | Example usage of Grid Pattern. | `npx shadcn@latest add https://ui.balick.me/r/grid-pattern-demo.json` |
| dot-pattern-demo | registry:example | Example usage of Dot Pattern. | `npx shadcn@latest add https://ui.balick.me/r/dot-pattern-demo.json` |
| flickering-grid-demo | registry:example | Example usage of Flickering Grid. | `npx shadcn@latest add https://ui.balick.me/r/flickering-grid-demo.json` |
| retro-grid-demo | registry:example | Example usage of Retro Grid. | `npx shadcn@latest add https://ui.balick.me/r/retro-grid-demo.json` |
| ripple-demo | registry:example | Example usage of Ripple. | `npx shadcn@latest add https://ui.balick.me/r/ripple-demo.json` |
| light-rays-demo | registry:example | Example usage of Light Rays. | `npx shadcn@latest add https://ui.balick.me/r/light-rays-demo.json` |
| aurora-demo | registry:example | Example usage of Aurora. | `npx shadcn@latest add https://ui.balick.me/r/aurora-demo.json` |
| grain-demo | registry:example | Example usage of Grain. | `npx shadcn@latest add https://ui.balick.me/r/grain-demo.json` |
| interactive-grid-demo | registry:example | Example usage of Interactive Grid. | `npx shadcn@latest add https://ui.balick.me/r/interactive-grid-demo.json` |
| wave-lines-demo | registry:example | Example usage of Wave Lines. | `npx shadcn@latest add https://ui.balick.me/r/wave-lines-demo.json` |
| section-demo | registry:example | Example usage of Section. | `npx shadcn@latest add https://ui.balick.me/r/section-demo.json` |
| arrow-button-demo | registry:example | Example usage of Arrow Button. | `npx shadcn@latest add https://ui.balick.me/r/arrow-button-demo.json` |
| copy-button-demo | registry:example | Example usage of Copy Button. | `npx shadcn@latest add https://ui.balick.me/r/copy-button-demo.json` |
| status-button-demo | registry:example | Example usage of Status Button. | `npx shadcn@latest add https://ui.balick.me/r/status-button-demo.json` |
| hold-button-demo | registry:example | Example usage of Hold Button. | `npx shadcn@latest add https://ui.balick.me/r/hold-button-demo.json` |
| text-roll-button-demo | registry:example | Example usage of Text Roll Button. | `npx shadcn@latest add https://ui.balick.me/r/text-roll-button-demo.json` |
| magnetic-button-demo | registry:example | Example usage of Magnetic Button. | `npx shadcn@latest add https://ui.balick.me/r/magnetic-button-demo.json` |
| ripple-button-demo | registry:example | Example usage of Ripple Button. | `npx shadcn@latest add https://ui.balick.me/r/ripple-button-demo.json` |
| spotlight-button-demo | registry:example | Example usage of Spotlight Button. | `npx shadcn@latest add https://ui.balick.me/r/spotlight-button-demo.json` |
| expand-button-demo | registry:example | Example usage of Expand Button. | `npx shadcn@latest add https://ui.balick.me/r/expand-button-demo.json` |
| theme-toggle-button-demo | registry:example | Example usage of Theme Toggle Button. | `npx shadcn@latest add https://ui.balick.me/r/theme-toggle-button-demo.json` |
| word-rotate-demo | registry:example | Example usage of Word Rotate. | `npx shadcn@latest add https://ui.balick.me/r/word-rotate-demo.json` |
| text-reveal-demo | registry:example | Example usage of Text Reveal. | `npx shadcn@latest add https://ui.balick.me/r/text-reveal-demo.json` |
| typewriter-demo | registry:example | Example usage of Typewriter. | `npx shadcn@latest add https://ui.balick.me/r/typewriter-demo.json` |
| scramble-text-demo | registry:example | Example usage of Scramble Text. | `npx shadcn@latest add https://ui.balick.me/r/scramble-text-demo.json` |
| shimmer-text-demo | registry:example | Example usage of Shimmer Text. | `npx shadcn@latest add https://ui.balick.me/r/shimmer-text-demo.json` |
| highlight-text-demo | registry:example | Example usage of Highlight Text. | `npx shadcn@latest add https://ui.balick.me/r/highlight-text-demo.json` |
| underline-link-demo | registry:example | Example usage of Underline Link. | `npx shadcn@latest add https://ui.balick.me/r/underline-link-demo.json` |
| expandable-text-demo | registry:example | Example usage of Expandable Text. | `npx shadcn@latest add https://ui.balick.me/r/expandable-text-demo.json` |
| countdown-demo | registry:example | Example usage of Countdown. | `npx shadcn@latest add https://ui.balick.me/r/countdown-demo.json` |
| navbar-01 | registry:block | Sticky navigation bar that turns translucent on scroll, with an accessible mobile menu. | `npx shadcn@latest add https://ui.balick.me/r/navbar-01.json` |
| hero-01 | registry:block | Centred hero with announcement pill, animated headline, product preview and a scrolling logo cloud. | `npx shadcn@latest add https://ui.balick.me/r/hero-01.json` |
| hero-02 | registry:block | Left-aligned hero with key figures and an animated deploy terminal. No logo strip, so it pairs with logos-01. | `npx shadcn@latest add https://ui.balick.me/r/hero-02.json` |
| hero-03 | registry:block | Personal introduction with availability status, social links and a scrolling list of tools. Made for portfolios. | `npx shadcn@latest add https://ui.balick.me/r/hero-03.json` |
| logos-01 | registry:block | Hairline grid of customer logos with a short introduction. | `npx shadcn@latest add https://ui.balick.me/r/logos-01.json` |
| about-01 | registry:block | Two-column introduction with paragraphs, key figures and skills. | `npx shadcn@latest add https://ui.balick.me/r/about-01.json` |
| features-01 | registry:block | Bento grid of four illustrated features, followed by a row of secondary features. | `npx shadcn@latest add https://ui.balick.me/r/features-01.json` |
| features-02 | registry:block | Six features in a hairline grid, with a left-aligned header. | `npx shadcn@latest add https://ui.balick.me/r/features-02.json` |
| integrations-01 | registry:block | Twelve integrations in a hairline grid, next to a sticky header and a link to the full list. | `npx shadcn@latest add https://ui.balick.me/r/integrations-01.json` |
| projects-01 | registry:block | Grid of projects with screenshots, summary, year and stack. Draws a placeholder when a project has no image. | `npx shadcn@latest add https://ui.balick.me/r/projects-01.json` |
| testimonials-01 | registry:block | Masonry wall of customer quotes with names, roles and initials avatars. | `npx shadcn@latest add https://ui.balick.me/r/testimonials-01.json` |
| pricing-01 | registry:block | Three-tier pricing with an animated monthly / yearly toggle and a highlighted plan. | `npx shadcn@latest add https://ui.balick.me/r/pricing-01.json` |
| pricing-02 | registry:block | One all-inclusive plan: what's included on one side, price and call to action on the other. | `npx shadcn@latest add https://ui.balick.me/r/pricing-02.json` |
| pricing-03 | registry:block | Accessible feature comparison across three plans, grouped by category, with the featured plan highlighted. | `npx shadcn@latest add https://ui.balick.me/r/pricing-03.json` |
| faq-01 | registry:block | Two-column FAQ: sticky header with a contact link, and an accessible accordion built on native disclosure elements. | `npx shadcn@latest add https://ui.balick.me/r/faq-01.json` |
| blog-01 | registry:block | Three recent articles with a cover, category, date, author and reading time. | `npx shadcn@latest add https://ui.balick.me/r/blog-01.json` |
| newsletter-01 | registry:block | Email signup card with a confirmation state; posts to a configurable endpoint. | `npx shadcn@latest add https://ui.balick.me/r/newsletter-01.json` |
| cta-01 | registry:block | High-contrast call to action panel with a subtle grid and two actions. | `npx shadcn@latest add https://ui.balick.me/r/cta-01.json` |
| contact-01 | registry:block | Contact panel with a copyable email address and a list of channels. | `npx shadcn@latest add https://ui.balick.me/r/contact-01.json` |
| contact-02 | registry:block | Contact form with a confirmation state, next to email, phone, address and opening hours. | `npx shadcn@latest add https://ui.balick.me/r/contact-02.json` |
| stats-01 | registry:block | Four key figures with short descriptions, in a hairline grid. | `npx shadcn@latest add https://ui.balick.me/r/stats-01.json` |
| timeline-01 | registry:block | Company story as a vertical timeline, with a sticky header. | `npx shadcn@latest add https://ui.balick.me/r/timeline-01.json` |
| services-01 | registry:block | Numbered list of services with a starting price, deliverables and a link. | `npx shadcn@latest add https://ui.balick.me/r/services-01.json` |
| steps-01 | registry:block | Four numbered steps joined by a connector, horizontal on desktop and vertical on mobile. | `npx shadcn@latest add https://ui.balick.me/r/steps-01.json` |
| team-01 | registry:block | Team members with an avatar, role, short bio and social links. | `npx shadcn@latest add https://ui.balick.me/r/team-01.json` |
| footer-01 | registry:block | Multi-column footer with newsletter form, status indicator, social links and an oversized wordmark. | `npx shadcn@latest add https://ui.balick.me/r/footer-01.json` |
| footer-02 | registry:block | Single-row footer with links and socials, and a legal line. | `npx shadcn@latest add https://ui.balick.me/r/footer-02.json` |
| stagger | registry:ui | Brings a list or a grid in one item after the other, on mount or when scrolled into view. | `npx shadcn@latest add https://ui.balick.me/r/stagger.json` |
| stagger-demo | registry:example | Example usage of Stagger. | `npx shadcn@latest add https://ui.balick.me/r/stagger-demo.json` |
| mask-reveal | registry:ui | Uncovers an image or a card with a mask that slides across it. | `npx shadcn@latest add https://ui.balick.me/r/mask-reveal.json` |
| mask-reveal-demo | registry:example | Example usage of Mask Reveal. | `npx shadcn@latest add https://ui.balick.me/r/mask-reveal-demo.json` |
| orbit | registry:ui | Items that circle around a center while staying upright. | `npx shadcn@latest add https://ui.balick.me/r/orbit.json` |
| orbit-demo | registry:example | Example usage of Orbit. | `npx shadcn@latest add https://ui.balick.me/r/orbit-demo.json` |
| tilt-card | registry:ui | A card that leans toward the pointer in 3D, with a soft glare. | `npx shadcn@latest add https://ui.balick.me/r/tilt-card.json` |
| tilt-card-demo | registry:example | Example usage of Tilt Card. | `npx shadcn@latest add https://ui.balick.me/r/tilt-card-demo.json` |
| parallax | registry:ui | A layer that moves at its own pace while the page scrolls. | `npx shadcn@latest add https://ui.balick.me/r/parallax.json` |
| parallax-demo | registry:example | Example usage of Parallax. | `npx shadcn@latest add https://ui.balick.me/r/parallax-demo.json` |
| scroll-progress | registry:ui | A bar that fills as you scroll the page or a panel. | `npx shadcn@latest add https://ui.balick.me/r/scroll-progress.json` |
| scroll-progress-demo | registry:example | Example usage of Scroll Progress. | `npx shadcn@latest add https://ui.balick.me/r/scroll-progress-demo.json` |
| gauge | registry:ui | A three-quarter ring for a percentage, colored past its thresholds. | `npx shadcn@latest add https://ui.balick.me/r/gauge.json` |
| gauge-demo | registry:example | Example usage of Gauge. | `npx shadcn@latest add https://ui.balick.me/r/gauge-demo.json` |
| segment-meter | registry:ui | A level in a few segments, such as the strength of a password. | `npx shadcn@latest add https://ui.balick.me/r/segment-meter.json` |
| segment-meter-demo | registry:example | Example usage of Segment Meter. | `npx shadcn@latest add https://ui.balick.me/r/segment-meter-demo.json` |
| spinner | registry:ui | Twelve bars that fade in turn, for waits the size of an icon. | `npx shadcn@latest add https://ui.balick.me/r/spinner.json` |
| spinner-demo | registry:example | Example usage of Spinner. | `npx shadcn@latest add https://ui.balick.me/r/spinner-demo.json` |
| uptime-bar | registry:ui | The history of a service, one bar per day, colored by how the day went. | `npx shadcn@latest add https://ui.balick.me/r/uptime-bar.json` |
| uptime-bar-demo | registry:example | Example usage of Uptime Bar. | `npx shadcn@latest add https://ui.balick.me/r/uptime-bar-demo.json` |
| status-badge | registry:ui | A pill that names the state of a service, with a live dot. | `npx shadcn@latest add https://ui.balick.me/r/status-badge.json` |
| status-badge-demo | registry:example | Example usage of Status Badge. | `npx shadcn@latest add https://ui.balick.me/r/status-badge-demo.json` |
| loading-dots | registry:ui | Three dots that pulse in turn, sized like the text around them. | `npx shadcn@latest add https://ui.balick.me/r/loading-dots.json` |
| loading-dots-demo | registry:example | Example usage of Loading Dots. | `npx shadcn@latest add https://ui.balick.me/r/loading-dots-demo.json` |
| count-badge | registry:ui | A count pinned to an icon or an avatar, which pops when it changes. | `npx shadcn@latest add https://ui.balick.me/r/count-badge.json` |
| count-badge-demo | registry:example | Example usage of Count Badge. | `npx shadcn@latest add https://ui.balick.me/r/count-badge-demo.json` |

## For AI agents

```text
You are adding components from @balick to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/balick.md) for the component list.
2. Fetch the machine-readable index: https://ui.balick.me/r/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: balick).
```