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