Arc UI: Animierte React-Komponenten für shadcn und Next.js

X-PostEliaTool

Elia präsentiert eine flüssig animierte Share-Sheet-Komponente aus Arc UI, einer Komponentenbibliothek mit 153 animierten React-Komponenten und 89 UI-Blöcken für Next.js und das shadcn-Ökosystem.

Das Wichtigste

  1. Arc UI stellt 153 React-Komponenten und 89 zusammenhängende UI-Blöcke mit integrierter Motion bereit.
  2. Die Komponenten lassen sich über die shadcn CLI installieren oder als Quellcode direkt ins eigene Projekt übernehmen.
  3. Entwickler können KI-Assistenten wie Claude, Cursor oder Codex über llms.txt und Markdown-Dokumentationsseiten anbinden.
  4. Das demonstrierte Share-Sheet morpht nahtlos von einem Button in ein vollständiges Sharing-Panel.
  5. Arc UI bietet eine Pro-Version für bewegungsintensive Komponenten und berücksichtigt Barrierefreiheits-Einstellungen wie Reduced Motion.

Warum das relevant ist

Viele moderne UI-Bibliotheken vernachlässigen flüssige Übergänge oder überlassen sie komplett dem Entwickler. Arc UI verbindet das beliebte shadcn-Prinzip (Komponentenquellcode liegt direkt im Projekt) mit vorgefertigter Motion und nativer Unterstützung für KI-gestützte Entwicklungsworkflows.

Einordnung

Das vorgestellte Share-Sheet erregte auf X Aufmerksamkeit durch geschmeidige Interaktionen. Feedback aus der Design-Community wies jedoch auf Risiken wie unruhige Animationen und ungleichmäßige Abstände hin, worauf Elia ankündigte, Timing und Konsistenz weiter zu optimieren. Für Frontend-Teams bietet Arc UI eine schnelle Möglichkeit, anspruchsvolle Micro-Interaktionen in Next.js-Projekte zu integrieren, ohne komplexe Motion-Logik von Grund auf neu schreiben zu müssen.

Original-Post

Elia

@eliakuratli · 7. Oktober 2026

Sharing should feel this smooth t.co/PAj2XcPYIF t.co/sOLFFYxqJs

600 Likes17 Antworten555 Lesezeichen20.517 Aufrufe

Auf X ansehen
Weitere Posts im Thread (7)
  1. @emanueledpt Thanks Bro!
  2. Explore all of them here -> t.co/PAj2XcPYIF
  3. @aaapinen 💯
  4. @omkarships Thanks a lot Omkar!
  5. @mack_designer Thanks a lot!
  6. @darylginn Thanks for the Feedback Daryl! I will try to optimize it so in general more consistent Would u do the animation faster and snappier?
  7. @aviralj02 Yeah hahaha
Ausgewählte Antworten (5)
  • @darylginn @eliakuratli I like the idea, but I would argue there is too much happening here. The intro/outro animation is unstable, causing jittering elements. The avatar animation is also slow and tedious, and there's also a lot of inconsistent paddings/gaps which could be refined.
  • @aviralj02 @eliakuratli going to make me share more if thats the share cta
  • @emanueledpt @eliakuratli damn this is smooth
  • @aaapinen @eliakuratli followed. networking with a generous definition of effort
  • @omkarships @eliakuratli Looks great man 👏

Erwähnte Links

Links und Tools aus diesem Beitrag

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 9. Oktober 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • X-Post:Houdayfa

    UIArc: Animierte React-Komponenten für shadcn und Next.js

    Houdayfa stellt die von Elia Kuratli entwickelte Komponentenbibliothek UIArc vor. Die Bibliothek bietet 149 React-Komponenten und 87 UI-Blöcke mit integrierten Animationen, die für Next.js und das shadcn-Ökosystem optimiert sind.

    869Lesezeichen33.992Aufrufe

    Webentwicklung· Tool

  • Link:uiarc.dev

    Arc: Animierte React-Komponenten und UI-Blöcke für shadcn und KI-Tools

    Arc (uiarc.dev) ist eine Komponentenbibliothek für React mit integrierten Animationen. Die Sammlung umfasst 140 UI-Komponenten und 83 Blöcke, die sich über das shadcn-CLI, einen MCP-Server oder KI-Tools wie Cursor und Claude in Projekte einbinden lassen.

    Webentwicklung· Tool

  • X-Post:Houdayfa

    Kuratierte UI- und Animationsbibliotheken für moderne Web-Interfaces

    Designer Houdayfa teilt eine Auswahl von UI-Komponentenbibliotheken und Motion-Sammlungen für moderne Webanwendungen. Vorgestellt werden unter anderem Arc UI mit KI-kompatiblen Komponenten für Next.js und shadcn sowie Kinetics mit 153 physikbasierten Feder-Animationen.

    611Lesezeichen18.912Aufrufe

    KI & AI· Sammlung

  • X-Post:Kailash

    Kuratierte UI- und Micro-Interaction-Bibliotheken für React und Next.js

    Kailash (@kail_designs) empfiehlt sechs spezialisierte Komponentenbibliotheken und Interaction-Toolkits, mit denen Frontend-Entwickler und Designer Benutzeroberflächen durch vorgefertigte Animationen und Micro-Interactions aufwerten können.

    994Lesezeichen29.793Aufrufe

    Webentwicklung· Sammlung

  • X-Post:Urvish

    useLayouts: Kostenlose animierte React-Komponenten

    Entwickler Urvish stellt useLayouts vor, eine Sammlung kostenloser und anpassbarer React-Komponenten mit Fokus auf Interaktion und Animation.

    343Lesezeichen17.626Aufrufe

    Webentwicklung· Tool

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.