carousal component added

[ariflogs]

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced a new Carousel component with support for horizontal and vertical orientations, keyboard navigation, and customizable controls
  • Updated GitHub link button to icon-only design for a cleaner top navigation

• Documentation

  • Added comprehensive documentation for the Carousel component with multiple usage examples

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
retro-ui	Ready	Preview	Comment	Nov 29, 2025 11:52pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds a new Carousel component built with Embla Carousel, complete with horizontal/vertical orientation, keyboard navigation, and composable subcomponents. Includes configuration entries, documentation, three preview examples, a minor TopNav GitHub button visual update, and the embla-carousel-react dependency.

Changes

Cohort / File(s)	Summary
UI Component Update components/TopNav.tsx	Replaced GitHub link button from "sm" size with "Star on GitHub" text to "icon" size with only the GitHub icon, removing the accompanying text and margin class.
Carousel Core Component components/retroui/Carousel.tsx	New Carousel component with Embla Carousel integration; exposes context-based API (carouselRef, api, orientation, navigation state), keyboard navigation (ArrowLeft/ArrowRight), and composable subcomponents as static properties (Content, Item, Previous, Next).
Configuration & Navigation Updates config/components.ts, config/navigation.ts, registry.json, public/r/carousel.json	Added carousel core component entry, three preview/example entries (carousel-style-default, carousel-style-sizes, carousel-style-vertical), navigation menu item marked as "New", and registry component entry with dependencies and file references.
Documentation & Examples content/docs/components/carousel.mdx, preview/components/carousel-style-*.tsx (3 files)	New MDX documentation page with installation, usage guidance, and three example components showcasing default, responsive sizes (md:basis-1/2, lg:basis-1/3), and vertical carousel configurations.
Dependency Addition package.json	Added embla-carousel-react (^8.6.0) dependency.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Primary focus: components/retroui/Carousel.tsx — Review the context pattern, Embla lifecycle integration, keyboard handling, orientation-aware positioning logic, and composition pattern for nested subcomponents.
• Secondary: Preview examples (preview/components/carousel-style-*.tsx) — Verify correct usage of the Carousel API and consistency across examples.
• Configuration: Verify config entries, navigation routing, and registry consistency.

Possibly related PRs

• New calendar component!  #101: Modifies Button component exports and variants (components/retroui/Button.tsx), which are referenced in the Carousel registry data and may have overlapping buttonVariants changes.

Poem

🎠 Round and round the carousel does spin,
Embla-powered joy within,
Context-wrapped with composable grace,
Each slide finds its rightful place!
Preview, docs, and config align—
A merry carousel, oh so fine! 🐰

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch new-com-carousel

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5977e3e and c803dd4.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (11)

• components/TopNav.tsx (1 hunks)
• components/retroui/Carousel.tsx (1 hunks)
• config/components.ts (2 hunks)
• config/navigation.ts (1 hunks)
• content/docs/components/carousel.mdx (1 hunks)
• package.json (1 hunks)
• preview/components/carousel-style-default.tsx (1 hunks)
• preview/components/carousel-style-sizes.tsx (1 hunks)
• preview/components/carousel-style-vertical.tsx (1 hunks)
• public/r/carousel.json (1 hunks)
• registry.json (89 hunks)

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}