odysseyui publishes a shadcn registry at odysseyui.com, with 148 components installable through the shadcn CLI.
Copy a prompt for your agent, copy the install command, or open the docs that ship it.
A composable chat container with auto-scroll, empty state, animated messages, scroll-to-bottom button, and divider support.
A composable chat message bubble with avatar, content, and timestamp sub-components. Role-aware layout for user and assistant messages.
A modal-based AI model picker with provider filtering, search, starred models, and capability badges.
Simple Prompt Interface input design.
A full-featured chat search modal with conversation preview, inline rename, delete, keyboard navigation, and time-grouped results.
A collapsible AI tool-run steps component with animated shimmer trigger and a vertical progress bar.
An animated AI reasoning step-by-step thought chain component with collapsible steps and status indicators.
A token usage card showing input/output counts, costs, proportion bar, and an interactive token breakdown with tooltips.
An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it.
A card component with animated SVG stroke and split-text reveal on hover.
A code component that animates the code as it is written.
A styled code block frame component with language badge and optional copy functionality.
A tabs component that displays code for different languages.
An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.
A minimal footer design inspired by Dia browser.
A scrolling wheel that displays GitHub stars count.
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Collapsible sidebar app shell with search command palette, breadcrumb page header, scrollable nav sections, and avatar-based user dropdown.
A floating sidebar app shell with collapsible icon mode, searchable navigation, keyboard shortcuts modal, and user menu.
A button component with a variety of styles and animations.
A copy button component with a variety of styles and animations.
A clickable button that links to a GitHub repository and displays the number of stars.
An icon button component with a variety of styles and animations.
Turn file uploads into engaging moments with smooth animations and intuitive visual feedback
A button that toggles the theme gradually.
A fun notification list with animated stacking and cards that expand as you interact.
A playful todolist component with animated wavy strikethroughs for each completed task.
Accordion-based FAQ section with a serif heading and divider separators.
Animated logo cloud with staggered fade-in and group cycling.
Animated logo cloud that cycles groups of 3 logos with spring blur transitions.
Infinite scrolling logo marquee with progressive blur edges and motion-powered animation.
CSS-animated logo carousel that cycles groups with blur and slide transitions.
CSS marquee logo cloud with configurable direction, speed, gap, and fade edges.
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.
A horizontal Spotify music card with blurred album art background, vinyl record animation, seek bar, and playback controls. Requires a /api/spotify route.
A vertical Spotify music card with a progressive blur album art background, seek bar, and transport controls. Requires a /api/spotify route.
A vertical Spotify music card with a color-extracted blurred gradient background, album art, seek bar, and transport controls. Requires a /api/spotify route.
A greeting preloader that displays rapid greetings in different languages.
Modern pricing grid with animated sliding numbers, billing toggle, and featured plan corner decorations.
Three-column pricing with gradient featured card and illustrated cursor decoration.
Asymmetric three-column pricing with elevated featured plan, amber badge, and security footer note.
Pastel pricing cards with animated billing toggle, tag badges, and info rows.
Horizontal list-style pricing layout with accent icon blobs, strikethrough original prices, and optional recommended badge.
Tabbed individuals/teams pricing grid with coloured card backdrops, Avatar orbs, grain texture overlays, and feature checklists.
An animated AI orb avatar with blinking eyes, 12 color presets, 3 sizes, and 3 shapes (circle, square, squircle).
Animated tree-structured filter with nested checkboxes, search, and group cycling.
A control that allows the user to toggle between checked and not checked.
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
For sighted users to preview content available behind a link.
Rough-notation powered text annotations — highlight, underline, box, circle, and more.
Scramble-reveal animation that decodes characters progressively into the final text.
Sleek text shimmer effect.
3D wave shimmer effect that ripples through each character sequentially.
Animated typewriter effect with multi-sequence support, natural variance, delete animation, and auto-loop.
A badge component with semantic and color variants built on Base UI.
Alarm clock icon component.
Arrow right icon component.
Audio Lines icon component.
Battery Full icon component.
Bell ring icon component.
Clock icon component.
Disc 3 icon component.
Base component to use animated icons.
Loader icon component.
Menu icon component.
Party popper icon component.
Settings icon component.
Trash 2 icon component.
User icon component.
Wifi icon component.
An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it.
A code block component that animates the code as it is written.
An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.
A component that animates a number of stars, smoothly animating number transitions using the SlidingNumber component.
A pin list component that allows you to pin items to the top of the list.
A scroll progress component that allows you to track the progress of a scrollable element.
A slot component that allows you to use motion components with any element.
A flexible, animated spring component that attaches a draggable element to its origin with a spring line.
A set of layered sections of content—known as tab panels—that are displayed one at a time.
An animated tooltip that shows contextual info on hover or focus and smoothly glides to the next element without disappearing between transitions.
An easily stylable accordion component.
A dialog that requires user response to proceed.
An easily stylable checkbox component.
A collapsible panel controlled by a button.
A popup that opens on top of the entire page.
A component that allows you to display a list of files and folders.
A list of actions in a dropdown, enhanced with keyboard navigation.
An accessible popup anchored to a button.
A popup that appears when a link is hovered, showing a preview for sighted users.
Displays the status of a task that takes a long time.
An easily stylable radio button component.
A control that indicates whether a setting is on or off.
A component for toggling between related panels on the same page.
A two-state button that can be on or off.
Provides a shared state to a series of toggle buttons.
A popup that appears when an element is hovered or focused, showing a hint for sighted users.
A simple button that animates on hover and tap.
A button that flips between two states on hover.
A button that fills on hover.
A button that animates on tap with a ripple effect.
An effect that automatically adjusts the height of an element based on its content.
An effect that allows you to animate elements with a blur effect on first view or load.
An effect that creates animated effects at the click position, adding interactive feedback to user actions.
An effect that allows you to animate elements on first view or load.
An effect that allows you to animate elements with a fade effect on first view or load.
A highlight effect that allows you to highlight elements on hover, click or with a controlled value.
An effect that allows you to zoom in on an image on hover.
A magnetic effect that clings to the cursor, creating a magnetic attraction effect.
A particles effect that creates a particle system.
An animated light sweep effect with configurable timing, colors, and triggers (hover, tap, or continuous).
An effect that allows you to animate elements with a slide effect on first view or load.
An effect that allows you to toggle the theme gradually.
An effect that allows you to animate elements with a tilt effect on mouse hover.
An effect that allows you to animate elements with a zoom effect on first view or load.
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.
A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom dialogs and alerts.
A simple, accessible foundation for building custom UIs that show and hide content, like togglable accordion panels.
Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.
Switches are a pleasant interface for toggling a value between two states, and offer the same semantics and keyboard navigation as native checkbox elements.
Easily create accessible, fully customizable tab interfaces, with robust focus management and keyboard navigation support.
A vertically stacked set of interactive headings that each reveal an associated section of content.
A modal dialog that interrupts the user with important content and expects a response.
A control that allows the user to toggle between checked and not checked.
An interactive component which expands/collapses a panel.
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
A component that allows you to display a list of files and folders.
For sighted users to preview content available behind a link.
Displays rich content in a portal, triggered by a button.
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Extends the Dialog component to display content that complements the main content of the screen.
A control that allows the user to toggle between checked and not checked.
A set of layered sections of content—known as tab panels—that are displayed one at a time.
A two-state button that can be either on or off.
A set of two-state buttons that can be toggled on or off.
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
A counting number animation.
A gradient text animation.
A highlight text animation.
A text component that smoothly morphs characters to transition between strings.
A rolling text animation.
A rotating text animation.
A scrolling number animation.
A shimmering text animation.
A sliding number animation.
A splitting text animation.
A typing text animation.
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.
.
├─ 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
pnpm install
pnpm dev
This starts the Turborepo dev pipeline (including the docs app in apps/www).
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
If you only want to run the web app:
pnpm --filter ./apps/www dev
pnpm --filter ./apps/www build
pnpm --filter ./apps/www start
The docs app includes a registry build script:
apps/www/scripts/build-registry.mtsapps/www/registry/*pnpm registry:buildUse this when adding or updating publishable components/demos/hooks/icons.
packages/eslint-configpackages/typescript-configcommitlintapps/www/.next)turbo.json defines cache-aware build, lint, and persistent dev taskspnpm lint
pnpm build
package.json and apps/www/package.json).git add .
git commit -m "chore(release): vX.Y.Z"
git tag vX.Y.Z
git push origin main --tags
pnpm install --frozen-lockfile
pnpm --filter ./apps/www exec rimraf .next
pnpm build
The packages and primitives its components pull in, counted across the registry.
