Also in the odysseyui registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

Chat Container

components-ai-chat-container

A composable chat container with auto-scroll, empty state, animated messages, scroll-to-bottom button, and divider support.

motion, @hugeicons/react, @hugeicons/core-free-icons1 file1 example

Message Bubble

components-ai-message-bubble

A composable chat message bubble with avatar, content, and timestamp sub-components. Role-aware layout for user and assistant messages.

@hugeicons/react, @hugeicons/core-free-icons1 file1 example

Model Selector

components-ai-model-selector

A modal-based AI model picker with provider filtering, search, starred models, and capability badges.

motion, lucide-react1 file1 example

Prompt Input

components-ai-prompt-input

Simple Prompt Interface input design.

@hugeicons/core-free-icons, @hugeicons/react1 file1 example

Search Modal

components-ai-search-modal

A full-featured chat search modal with conversation preview, inline rename, delete, keyboard navigation, and time-grouped results.

motion, @hugeicons/react, @hugeicons/core-free-icons, react-markdown2 files1 example

Steps

components-ai-steps

A collapsible AI tool-run steps component with animated shimmer trigger and a vertical progress bar.

lucide-react1 file1 example

Token Usage

components-ai-token-usage

A token usage card showing input/output counts, costs, proportion bar, and an interactive token breakdown with tooltips.

lucide-react, class-variance-authority1 file1 example

Avatar Group

components-animate-avatar-group

An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it.

motion1 file1 example

Card Stroke

components-animate-card-stroke

A card component with animated SVG stroke and split-text reveal on hover.

gsap1 file1 example

Code

components-animate-code

A code component that animates the code as it is written.

next-themes1 file1 example

Code Block

components-animate-code-block

A styled code block frame component with language badge and optional copy functionality.

shiki1 file1 example

Code Tabs

components-animate-code-tabs

A tabs component that displays code for different languages.

shiki1 file1 example

Cursor

components-animate-cursor

An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.

1 file1 example

Footer

components-animate-footer

A minimal footer design inspired by Dia browser.

gsap1 file1 example

GitHub Stars Wheel

components-animate-github-stars-wheel

A scrolling wheel that displays GitHub stars count.

motion1 file1 example

Tabs

components-animate-tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

1 file1 example

App Shell 1

components-app-shells-app-shell-1

Collapsible sidebar app shell with search command palette, breadcrumb page header, scrollable nav sections, and avatar-based user dropdown.

@hugeicons/react, @hugeicons/core-free-icons2 files1 example

App Shell 2

components-app-shells-app-shell-2

A floating sidebar app shell with collapsible icon mode, searchable navigation, keyboard shortcuts modal, and user menu.

@hugeicons/react, @hugeicons/core-free-icons2 files1 example

Button

components-buttons-button

A button component with a variety of styles and animations.

class-variance-authority1 file2 examples

Copy Button

components-buttons-copy

A copy button component with a variety of styles and animations.

motion, lucide-react, class-variance-authority1 file1 example

Icon Button

components-buttons-icon

An icon button component with a variety of styles and animations.

class-variance-authority1 file

Smart Upload

components-buttons-smart-upload

Turn file uploads into engaging moments with smooth animations and intuitive visual feedback

framer-motion, @hugeicons/core-free-icons, @hugeicons/react1 file1 example

Theme Toggler Button

components-buttons-theme-toggler

A button that toggles the theme gradually.

next-themes, class-variance-authority, lucide-react1 file1 example

Notification List

components-community-notification-list

A fun notification list with animated stacking and cards that expand as you interact.

motion, lucide-react1 file1 example

Playful Todolist

components-community-playful-todolist

A playful todolist component with animated wavy strikethroughs for each completed task.

motion1 file1 example

FAQ 1

components-faqs-faq-1

Accordion-based FAQ section with a serif heading and divider separators.

accordion1 file1 example

Logo Cloud 1

components-logoclouds-logocloud-1

Animated logo cloud with staggered fade-in and group cycling.

motion1 file1 example

Logo Cloud 2

components-logoclouds-logocloud-2

Animated logo cloud that cycles groups of 3 logos with spring blur transitions.

motion1 file1 example

Logo Cloud 3

components-logoclouds-logocloud-3

Infinite scrolling logo marquee with progressive blur edges and motion-powered animation.

motion, react-use-measure1 file1 example

Logo Cloud 4

components-logoclouds-logocloud-4

CSS-animated logo carousel that cycles groups with blur and slide transitions.

1 file1 example

Logo Cloud 5

components-logoclouds-logocloud-5

CSS marquee logo cloud with configurable direction, speed, gap, and fade edges.

1 file1 example

Album Cards

components-music-album-cards

A stacked album card row where clicking a card ejects a spinning vinyl disc, with hover lift and neighbor dimming effects. Requires a /api/spotify route.

spotify-url-info1 file1 example

Spotify Card

components-music-spotify-card

A horizontal Spotify music card with blurred album art background, vinyl record animation, seek bar, and playback controls. Requires a /api/spotify route.

spotify-url-info1 file1 example

Vertical Spotify Card 1

components-music-vertical-spotify-card-1

A vertical Spotify music card with a progressive blur album art background, seek bar, and transport controls. Requires a /api/spotify route.

spotify-url-info1 file1 example

Vertical Spotify Card 2

components-music-vertical-spotify-card-2

A vertical Spotify music card with a color-extracted blurred gradient background, album art, seek bar, and transport controls. Requires a /api/spotify route.

spotify-url-info1 file1 example

Pricing 1

components-pricings-pricing-1

Modern pricing grid with animated sliding numbers, billing toggle, and featured plan corner decorations.

motion, react-use-measure1 file1 example

Pricing 2

components-pricings-pricing-2

Three-column pricing with gradient featured card and illustrated cursor decoration.

button1 file1 example

Pricing 3

components-pricings-pricing-3

Asymmetric three-column pricing with elevated featured plan, amber badge, and security footer note.

button, badge1 file1 example

Pricing 4

components-pricings-pricing-4

Pastel pricing cards with animated billing toggle, tag badges, and info rows.

motion, react-use-measure1 file1 example

Pricing 5

components-pricings-pricing-5

Horizontal list-style pricing layout with accent icon blobs, strikethrough original prices, and optional recommended badge.

button, badge1 file1 example

Tree Filter

components-primitives-tree-filter

Animated tree-structured filter with nested checkboxes, search, and group cycling.

motion, @hugeicons/react, @hugeicons/core-free-icons1 file1 example

Checkbox

components-radix-checkbox

A control that allows the user to toggle between checked and not checked.

class-variance-authority1 file1 example

Dropdown Menu

components-radix-dropdown-menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

lucide-react1 file

Hover Card

components-radix-hover-card

For sighted users to preview content available behind a link.

1 file1 example

Text Highlighter

components-texts-text-highlighter

Rough-notation powered text annotations — highlight, underline, box, circle, and more.

motion, rough-notation1 file1 example

Text Reveal

components-texts-text-reveal

Scramble-reveal animation that decodes characters progressively into the final text.

motion1 file1 example

Text Shimmer

components-texts-text-shimmer

Sleek text shimmer effect.

motion1 file1 example

Text Shimmer Wave

components-texts-text-shimmer-wave

3D wave shimmer effect that ripples through each character sequentially.

motion1 file1 example

Badge

components-ui-badge

A badge component with semantic and color variants built on Base UI.

@base-ui-components/react, class-variance-authority1 file2 examples

Alarm Clock Icon

icons-alarm-clock

Alarm clock icon component.

motion1 file

Arrow Right Icon

icons-arrow-right

Arrow right icon component.

motion1 file

Audio Lines Icon

icons-audio-lines

Audio Lines icon component.

motion1 file

Battery Full Icon

icons-battery-full

Battery Full icon component.

motion1 file

Bell Ring Icon

icons-bell-ring

Bell ring icon component.

motion1 file

Clock Icon

icons-clock

Clock icon component.

motion1 file

Disc 3 Icon

icons-disc-3

Disc 3 icon component.

motion1 file

Icon

icons-icon

Base component to use animated icons.

motion1 file

Loader Icon

icons-loader

Loader icon component.

motion1 file

Menu Icon

icons-menu

Menu icon component.

motion1 file

Party Popper Icon

icons-party-popper

Party popper icon component.

motion1 file

Settings Icon

icons-settings

Settings icon component.

motion1 file

Trash 2 Icon

icons-trash-2

Trash 2 icon component.

motion1 file

User Icon

icons-user

User icon component.

motion1 file

Wifi Icon

icons-wifi

Wifi icon component.

motion1 file

Avatar Group

primitives-animate-avatar-group

An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it.

motion1 file1 example

Code Block

primitives-animate-code-block

A code block component that animates the code as it is written.

shiki1 file1 example

Cursor

primitives-animate-cursor

An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.

motion1 file1 example

Github Stars

primitives-animate-github-stars

A component that animates a number of stars, smoothly animating number transitions using the SlidingNumber component.

motion1 file1 example

Pin List

primitives-animate-pinned-list

A pin list component that allows you to pin items to the top of the list.

motion1 file1 example

Scroll Progress

primitives-animate-scroll-progress

A scroll progress component that allows you to track the progress of a scrollable element.

motion1 file1 example

Animate Slot

primitives-animate-slot

A slot component that allows you to use motion components with any element.

motion1 file

Spring

primitives-animate-spring

A flexible, animated spring component that attaches a draggable element to its origin with a spring line.

motion1 file1 example

Tabs

primitives-animate-tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

motion1 file1 example

Tooltip

primitives-animate-tooltip

An animated tooltip that shows contextual info on hover or focus and smoothly glides to the next element without disappearing between transitions.

motion, @floating-ui/react1 file1 example

Base Accordion

primitives-base-accordion

An easily stylable accordion component.

motion, @base-ui-components/react1 file1 example

Base Alert Dialog

primitives-base-alert-dialog

A dialog that requires user response to proceed.

motion, @base-ui-components/react1 file1 example

Base Checkbox

primitives-base-checkbox

An easily stylable checkbox component.

motion, @base-ui-components/react1 file1 example

Base Collapsible

primitives-base-collapsible

A collapsible panel controlled by a button.

motion, @base-ui-components/react1 file1 example

Base Dialog

primitives-base-dialog

A popup that opens on top of the entire page.

motion, @base-ui-components/react1 file1 example

Files

primitives-base-files

A component that allows you to display a list of files and folders.

motion1 file1 example

Base Menu

primitives-base-menu

A list of actions in a dropdown, enhanced with keyboard navigation.

motion, @base-ui-components/react1 file1 example

Base Popover

primitives-base-popover

An accessible popup anchored to a button.

motion, @base-ui-components/react1 file1 example

Base Preview Card

primitives-base-preview-card

A popup that appears when a link is hovered, showing a preview for sighted users.

motion, @base-ui-components/react1 file1 example

Base Progress

primitives-base-progress

Displays the status of a task that takes a long time.

motion, @base-ui-components/react1 file1 example

Base Radio

primitives-base-radio

An easily stylable radio button component.

motion, @base-ui-components/react1 file1 example

Base Switch

primitives-base-switch

A control that indicates whether a setting is on or off.

motion, @base-ui-components/react1 file1 example

Base Tabs

primitives-base-tabs

A component for toggling between related panels on the same page.

motion, @base-ui-components/react1 file1 example

Base Toggle

primitives-base-toggle

A two-state button that can be on or off.

motion, @base-ui-components/react1 file1 example

Base Toggle Group

primitives-base-toggle-group

Provides a shared state to a series of toggle buttons.

motion, @base-ui-components/react1 file1 example

Base Tooltip

primitives-base-tooltip

A popup that appears when an element is hovered or focused, showing a hint for sighted users.

motion, @base-ui-components/react1 file1 example

Button

primitives-buttons-button

A simple button that animates on hover and tap.

motion1 file1 example

Flip Button

primitives-buttons-flip

A button that flips between two states on hover.

motion1 file1 example

Ripple Button

primitives-buttons-ripple

A button that animates on tap with a ripple effect.

motion1 file1 example

Auto Height

primitives-effects-auto-height

An effect that automatically adjusts the height of an element based on its content.

motion1 file1 example

Blur

primitives-effects-blur

An effect that allows you to animate elements with a blur effect on first view or load.

motion1 file1 example

Click

primitives-effects-click

An effect that creates animated effects at the click position, adding interactive feedback to user actions.

motion1 file1 example

Effect

primitives-effects-effect

An effect that allows you to animate elements on first view or load.

motion1 file1 example

Fade

primitives-effects-fade

An effect that allows you to animate elements with a fade effect on first view or load.

motion1 file1 example

Highlight

primitives-effects-highlight

A highlight effect that allows you to highlight elements on hover, click or with a controlled value.

motion1 file1 example

Image Zoom

primitives-effects-image-zoom

An effect that allows you to zoom in on an image on hover.

motion1 file1 example

Magnetic

primitives-effects-magnetic

A magnetic effect that clings to the cursor, creating a magnetic attraction effect.

motion1 file1 example

Particles

primitives-effects-particles

A particles effect that creates a particle system.

motion1 file1 example

Shine

primitives-effects-shine

An animated light sweep effect with configurable timing, colors, and triggers (hover, tap, or continuous).

motion1 file1 example

Slide

primitives-effects-slide

An effect that allows you to animate elements with a slide effect on first view or load.

motion1 file1 example

Theme Toggler

primitives-effects-theme-toggler

An effect that allows you to toggle the theme gradually.

1 file1 example

Tilt

primitives-effects-tilt

An effect that allows you to animate elements with a tilt effect on mouse hover.

motion1 file1 example

Zoom

primitives-effects-zoom

An effect that allows you to animate elements with a zoom effect on first view or load.

motion1 file1 example

Headless Checkbox

primitives-headless-checkbox

Checkboxes provide the same functionality as native HTML checkboxes, without any of the styling, giving you a clean slate to design them however you'd like.

motion, @headlessui/react1 file1 example

Headless Dialog

primitives-headless-dialog

A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom dialogs and alerts.

motion, @headlessui/react1 file1 example

Headless Disclosure

primitives-headless-disclosure

A simple, accessible foundation for building custom UIs that show and hide content, like togglable accordion panels.

motion, @headlessui/react1 file1 example

Headless Popover

primitives-headless-popover

Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.

motion, @headlessui/react1 file1 example

Headless Switch

primitives-headless-switch

Switches are a pleasant interface for toggling a value between two states, and offer the same semantics and keyboard navigation as native checkbox elements.

motion, @headlessui/react1 file1 example

Headless Tabs

primitives-headless-tabs

Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.

motion, @headlessui/react1 file1 example

Radix Accordion

primitives-radix-accordion

A vertically stacked set of interactive headings that each reveal an associated section of content.

motion, radix-ui1 file1 example

Radix Alert Dialog

primitives-radix-alert-dialog

A modal dialog that interrupts the user with important content and expects a response.

motion, radix-ui1 file1 example

Radix Checkbox

primitives-radix-checkbox

A control that allows the user to toggle between checked and not checked.

motion, radix-ui1 file1 example

Radix Collapsible

primitives-radix-collapsible

An interactive component which expands/collapses a panel.

motion, radix-ui1 file1 example

Radix Dialog

primitives-radix-dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

motion, radix-ui1 file1 example

Radix Dropdown Menu

primitives-radix-dropdown-menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

motion, radix-ui1 file1 example

Files

primitives-radix-files

A component that allows you to display a list of files and folders.

motion1 file1 example

Radix Hover Card

primitives-radix-hover-card

For sighted users to preview content available behind a link.

motion, radix-ui1 file1 example

Radix Popover

primitives-radix-popover

Displays rich content in a portal, triggered by a button.

motion, radix-ui1 file1 example

Radix Progress

primitives-radix-progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

motion, radix-ui1 file1 example

Radix Radio Group

primitives-radix-radio-group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

motion, radix-ui1 file1 example

Radix Sheet

primitives-radix-sheet

Extends the Dialog component to display content that complements the main content of the screen.

motion, radix-ui1 file1 example

Radix Switch

primitives-radix-switch

A control that allows the user to toggle between checked and not checked.

motion, radix-ui1 file1 example

Radix Tabs

primitives-radix-tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

motion, radix-ui1 file1 example

Radix Toggle

primitives-radix-toggle

A two-state button that can be either on or off.

motion, radix-ui1 file1 example

Radix Toggle Group

primitives-radix-toggle-group

A set of two-state buttons that can be toggled on or off.

motion, radix-ui1 file1 example

Radix Tooltip

primitives-radix-tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

motion, radix-ui1 file1 example

Counting Number

primitives-texts-counting-number

A counting number animation.

motion1 file1 example

Gradient Text

primitives-texts-gradient

A gradient text animation.

motion1 file1 example

Highlight Text

primitives-texts-highlight

A highlight text animation.

motion1 file1 example

Morphing Text

primitives-texts-morphing

A text component that smoothly morphs characters to transition between strings.

motion1 file1 example

Rolling Text

primitives-texts-rolling

A rolling text animation.

motion1 file1 example

Rotating Text

primitives-texts-rotating

A rotating text animation.

motion1 file1 example

Scrolling Number

primitives-texts-scrolling-number

A scrolling number animation.

motion1 file1 example

Shimmering Text

primitives-texts-shimmering

A shimmering text animation.

motion1 file1 example

Sliding Number

primitives-texts-sliding-number

A sliding number animation.

motion, react-use-measure1 file1 example

Splitting Text

primitives-texts-splitting

A splitting text animation.

motion1 file2 examples

Typing Text

primitives-texts-typing

A typing text animation.

motion1 file1 example

From the odysseyui readme

OdysseyUI

OdysseyUI is a pnpm + Turborepo monorepo for building and publishing an animated React component system and its documentation site.

Built on the foundation of Animate UI.

Tech Stack

Next.js (App Router)
React 19 + TypeScript
Tailwind CSS v4
Turborepo
Fumadocs

Monorepo Structure

.
├─ apps/
│  └─ www/                  # Next.js docs site + component registry tooling
├─ packages/
│  ├─ ui/                   # Shared UI package
│  ├─ eslint-config/        # Shared ESLint presets
│  └─ typescript-config/    # Shared TypeScript presets
├─ turbo.json               # Turborepo pipeline
└─ pnpm-workspace.yaml      # Workspace package mapping

Prerequisites

Node.js 20+
pnpm 10+

Getting Started

pnpm install
pnpm dev

This starts the Turborepo dev pipeline (including the docs app in apps/www).

Common Commands

Run from the repository root:

# Build all packages/apps via Turbo
pnpm build

# Lint all packages/apps via Turbo
pnpm lint

# Format all TS/TSX/MDX files
pnpm format:write

# Check formatting
pnpm format:check

# Build the component registry for apps/www
pnpm registry:build

App-Level Commands

If you only want to run the web app:

pnpm --filter ./apps/www dev
pnpm --filter ./apps/www build
pnpm --filter ./apps/www start

Registry Workflow

The docs app includes a registry build script:

Script: apps/www/scripts/build-registry.mts
Output source folders: apps/www/registry/*
Command: pnpm registry:build

Use this when adding or updating publishable components/demos/hooks/icons.

Linting, Formatting, and Commits

ESLint config is shared from packages/eslint-config
TypeScript config is shared from packages/typescript-config
Commit messages follow Conventional Commits via commitlint

Deployment Notes

Production build output for the docs app is generated by Next.js (apps/www/.next)
turbo.json defines cache-aware build, lint, and persistent dev tasks

Release Process

Ensure the main branch is clean and up to date.
Run quality checks:

pnpm lint
pnpm build

Bump versions as needed (for example in root package.json and apps/www/package.json).
Commit changes and create a release tag:

git add .
git commit -m "chore(release): vX.Y.Z"
git tag vX.Y.Z
git push origin main --tags

Publish/deploy using your CI/CD workflow.

Troubleshooting

If dependencies are out of sync, run:

pnpm install --frozen-lockfile

If build artifacts become stale, clean and rebuild:

pnpm --filter ./apps/www exec rimraf .next
pnpm build

odysseyui contents

Typewriter

Thought Chain

Pricing 6

AI Orb Avatar

Greeting Preloader

GitHub Stars Button

Liquid Button

About odysseyui

Also in the odysseyui registry

Chat Container

Message Bubble

Model Selector

Prompt Input

Search Modal

Steps

Token Usage

Avatar Group

Card Stroke

Code

Code Block

Code Tabs

Cursor

Footer

GitHub Stars Wheel

Tabs

App Shell 1

App Shell 2

Button

Copy Button

Icon Button

Smart Upload

Theme Toggler Button

Notification List

Playful Todolist

FAQ 1

Logo Cloud 1

Logo Cloud 2

Logo Cloud 3

Logo Cloud 4

Logo Cloud 5

Album Cards

Spotify Card

Vertical Spotify Card 1

Vertical Spotify Card 2

Pricing 1

Pricing 2

Pricing 3

Pricing 4

Pricing 5

Tree Filter

Checkbox

Dropdown Menu

Hover Card

Text Highlighter

Text Reveal

Text Shimmer

Text Shimmer Wave

Badge

Alarm Clock Icon

Arrow Right Icon

Audio Lines Icon

Battery Full Icon

Bell Ring Icon

Clock Icon

Disc 3 Icon

Icon

Loader Icon

Menu Icon

Party Popper Icon

Settings Icon

Trash 2 Icon

User Icon

Wifi Icon

Avatar Group

Code Block

Cursor

Github Stars

Pin List

Scroll Progress