---
name: "@alexandrejoly"
slug: "alexandrejoly"
description: "Composable shadcn components that cover the details: a notification badge, an onboarding flow, a hint, infinite scroll and a CSS-only marquee."
category: "Animated components"
tags: ["animation", "onboarding", "overlays"]
framework: "react"
license: "MIT"
author: "AlexDemzz"
website: "https://alexandrejoly.me"
github: "https://github.com/AlexDemzz/alexandrejoly.me"
registry: "https://alexandrejoly.me/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 10
generated_at: "2026-10-27T06:34:08.542Z"
---

# @alexandrejoly

Composable shadcn components that cover the details: a notification badge, an onboarding flow, a hint, infinite scroll and a CSS-only marquee.

## Links

- Website: https://alexandrejoly.me
- GitHub: https://github.com/AlexDemzz/alexandrejoly.me
- Registry JSON: https://alexandrejoly.me/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/alexandrejoly
- This file: https://sh4dcn.netlify.app/md/alexandrejoly.md

## Install

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

## Components (10)

| name | type | description | install |
| --- | --- | --- | --- |
| notification-badge | registry:ui | A counter or dot on an icon or avatar, cut out with CSS shape() so it reads on any background | `npx shadcn@latest add https://alexandrejoly.me/r/notification-badge.json` |
| onboarding | registry:ui | A step-by-step flow with a segmented progress bar and CSS-only step transitions | `npx shadcn@latest add https://alexandrejoly.me/r/onboarding.json` |
| hint | registry:ui | A labeled trigger that opens a help bubble, its hit area stretched by a pseudo-element | `npx shadcn@latest add https://alexandrejoly.me/r/hint.json` |
| infinite-scroll | registry:ui | A list that loads more as you scroll, down or up, with a reverse mode held in place by CSS alone | `npx shadcn@latest add https://alexandrejoly.me/r/infinite-scroll.json` |
| marquee | registry:ui | A strip that loops its items only once CSS scroll-driven animations detect they overflow | `npx shadcn@latest add https://alexandrejoly.me/r/marquee.json` |
| item-inset-separator | registry:ui | A divider under an Item that starts at its content, past the media, placed with CSS anchor positioning | `npx shadcn@latest add https://alexandrejoly.me/r/item-inset-separator.json` |
| dialog-drawer | registry:ui | A responsive Dialog: a centered Dialog at desktop that becomes a swipeable Drawer below 768px. Drop-in replacement for the shadcn Dialog on Base UI or Radix: d… | `npx shadcn@latest add https://alexandrejoly.me/r/dialog-drawer.json` |
| sheet-drawer | registry:ui | A responsive Sheet: a side Sheet at desktop that becomes a swipeable Drawer below 768px, opening from the edge set with side. Drop-in replacement for the shadc… | `npx shadcn@latest add https://alexandrejoly.me/r/sheet-drawer.json` |
| popover-drawer | registry:ui | A responsive Popover: an anchored Popover at desktop that becomes a swipeable Drawer below 768px. Drop-in replacement for the shadcn Popover on Base UI or Radi… | `npx shadcn@latest add https://alexandrejoly.me/r/popover-drawer.json` |
| easy-modal | registry:ui | Modal component for react-easy-modals with Base UI Dialog. Supports nested modals. | `npx shadcn@latest add https://alexandrejoly.me/r/easy-modal.json` |

## For AI agents

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