@odysseyui

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.

Demo of the Chat Container component.

Demo of the Message Bubble component inside a Chat Container.

Demo of the AI model selector modal component.

Demo of the AI prompt input interface.

Demo of the Search Modal component.

Demo of the AI steps tool-run component.

Demo of the AI thought chain reasoning component.

Demo of the Token Usage component.

Demo showing a avatar group.

Demo of the card stroke animation.

Demo showing a code.

Demo showing a code block frame with a Python snippet.

Demo showing a code tabs.

Demo showing a cursor.

Demo of the dia browser inspired footer.

Demo showing an animated github stars wheel.

Demo showing an animated tabs.

Demo of the collapsible sidebar app shell with breadcrumb header and dashboard placeholder.

Demo for App Shell 2

Demo showing a button.

Demo showing a copy button.

Demo showing a GitHub stars button.

Demo of the Smart File Uploader.

Demo showing a theme toggler button.

Demo showing a notification list.

Demo showing a playful todolist.

Demo of the accordion FAQ section.

Demo of the animated logo cloud with group cycling.

Demo of the logo cloud that cycles groups of 3 with spring blur transitions.

Demo of the infinite scrolling logo marquee with progressive blur edges.

Demo of the CSS-animated logo carousel with blur and slide transitions.

Demo of the CSS marquee logo cloud with direction, speed, gap, and fade controls.

Demo for Album Cards

Demo for Spotify Card

Demo for Vertical Spotify Card 1

Demo for Vertical Spotify Card 2

Demo of a greeting preloader that displays rapid greetings in different languages.

Demo of the animated sliding number pricing grid.

Demo of the gradient featured card pricing section.

Demo of the asymmetric three-column pricing layout.

Demo of the pastel pricing cards with animated billing toggle.

Demo of the horizontal list-style pricing layout.

Demo of the tabbed individuals/teams pricing grid.

Demo showcasing all colors, sizes, and shapes of the Avatar component.

Demo of the animated tree filter with nested checkboxes and search.

Demo showing a checkbox.

Demo showing a hover card.

Demo of the TextHighlighter component showcasing all annotation types.

Demo of the Text Reveal scramble animation component.

Demo of text shimmer.

Demo of the Text Shimmer Wave component.

Demo of the Typewriter component with multi-sequence type and delete animation.

Demo showcasing all badge variants.

Demo showcasing all badge color variants.

Demo showcasing all button variants including the odysseyui variant.

Demo showing an animated avatar group.

Demo showing an animated code block.

Demo showing an animated cursor.

Demo showing an animated github stars counter.

Demo showing an animated pinned list.

Demo showing an animated scroll progress.

Demo showing an animated spring.

Demo showing an animated tabs.

Demo showing an animated tooltip.

Demo showing an animated base accordion.

Demo showing an animated base alert dialog.

Demo showing an animated base checkbox.

Demo showing an animated base collapsible.

Demo showing an animated base dialog.

Demo showing an animated base files.

Demo showing an animated base menu.

Demo showing an animated base popover.

Demo showing an animated base preview card.

Demo showing an animated base progress.

Demo showing an animated base radio.

Demo showing an animated base switch.

Demo showing an animated base tabs.

Demo showing an animated base toggle.

Demo showing an animated base toggle group.

Demo showing an animated base tooltip.

Demo showing a button.

Demo showing an animated flip button.

Demo showing an animated liquid button.

Demo showing a ripple button.

Demo showing an animated auto height.

Demo showing an animated blur.

Demo showing an animated click.

Demo showing an animated effect.

Demo showing an animated fade.

Demo showing an animated highlight.

Demo showing a image zoom effect.

Demo showing a magnetic effect.

Demo showing an animated particles.

Demo showing an animated shine.

Demo showing an animated slide.

Demo showing a theme toggler.

Demo showing an animated tilt.

Demo showing an animated zoom.

Demo showing an animated headless checkbox.

Demo showing an animated headless dialog.

Demo showing an animated headless disclosure.

Demo showing an animated headless popover.

Demo showing an animated headless switch.

Demo showing an animated headless tabs.

Demo showing an animated radix accordion.

Demo showing an animated radix alert dialog.

Demo showing an animated radix checkbox.

Demo showing an animated radix collapsible.

Demo showing an animated radix dialog.

Demo showing an animated radix dropdown menu.

Demo showing an animated radix files.

Demo showing an animated radix hover card.

Demo showing an animated radix popover.

Demo showing an animated radix progress.

Demo showing an animated radix radio group.

Demo showing an animated radix sheet.

Demo showing an animated radix switch.

Demo showing an animated radix tabs.

Demo showing an animated radix toggle.

Demo showing an animated radix toggle group.

Demo showing an animated radix tooltip.

Demo showing an animated counting number.

Demo showing an animated gradient text.

Demo showing an animated highlight text.

Demo showing an animated morphing text.

Demo showing an animated rolling text.

Demo showing an animated rotating text.

Demo showing an animated scrolling number.

Demo showing an animated shimmering text.

Demo showing an animated sliding number.

Demo showing an animated splitting text.

Demo showing an animated splitting text.

Demo showing an animated typing text.

A hook that allows you to automatically adjust the height of an element based on its content.

A hook that allows you to control a state.

A hook that allows you to get the data-state of an element.

A hook that allows you to check if an element is in view.

A hook that allows you to use a motion value state.

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.

A hook that allows you to create a strict context.

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).