👨‍🏫 Tutorial BeUI 100+ Free Animated React Components, Copy-Paste (MIT, Open Source)

[4 0 4]

beUI – Free Animated UI Components para sa React, Next.js at React Native
Copy-paste lang, sa'yo na ang code. Open source at MIT licensed.​

Hello mga ka-PHC!

Para sa mga web dev at mga gumagawa ng capstone o thesis na gusto ng UI na mukhang premium, check out beUI. Free at open-source na library ito ng animated components para sa React at Next.js, at ngayon pati React Native.

Hindi siya package na naka-lock. Kino-copy mo yung source code ng component papunta sa project mo, kaya pwede mong baguhin ang design at animation ayon sa gusto mo.

Why it's worth trying

• Libre at MIT licensed, pwede kahit sa client o commercial projects
• Smooth na animations agad, hindi mo na kailangang i-code mula scratch
• Isang command lang ang install per component, o copy-paste ng source
• Active ang development, may bagong components halos every week

Features

• 100+ React components at blocks: buttons, tabs, modals, toasts, drawers, command palette, OTP input, at iba pa
• Animated charts: donut, candlestick, treemap, funnel, at iba pa
• AI chat components: message bubbles, prompt input, streaming response, voice orb
• beUI Native: 71 components para sa React Native at Expo
• Live preview, usage example at API reference sa bawat component
• Sumusunod sa "reduce motion" setting ng device
• May MCP server at skill para sa AI coding tools tulad ng Cursor at Claude Code

Requirements

• Web: React 19, Tailwind CSS 4 at Motion (Framer Motion). May extra dependencies yung ibang components, nakalista sa page nila.
• React Native: Expo o bare React Native app, with Reanimated, Gesture Handler at Uniwind (tested sa Expo SDK 57 / React Native 0.86)
• Tools: Node.js at package manager (npm, pnpm, yarn o bun). Optional ang shadcn CLI, pwede ring manual copy.
• Hardware: Kung kaya ng PC mo mag-run ng React o Next.js dev server, kaya mo 'to

Quick start (web)

1. I-setup muna ang theme tokens gamit ang theme setup guide sa site
2. Pumili ng component at i-copy ang install command, halimbawa:
   

   npx shadcn@latest add @beui/button

3. O kaya i-copy ang source sa "Manual" tab ng component page

Quick start (React Native)
Pagkatapos ng one-time setup sa site, isang command lang per component:

npx beui-native add button

Pwede mo ring i-try muna sa phone gamit ang Expo Go QR code sa bawat component page.

Important notes

• License: MIT, pwede sa personal at commercial. Panatilihin lang ang copyright at license notice kapag kinopya mo ang source.
• beUI Pro ay hiwalay at bayad na produkto na may sariling license. Gumagana ang free library kahit walang Pro. Huwag mag-request o mag-share ng leaked Pro files dito.
• Built for React 19 + Tailwind 4. Kung luma ang setup mo (hal. Tailwind 3), baka kailangan ng adjustments, kaya i-test muna sa bagong project.
• Bago pa lang ang beUI Native (October 2026), kaya i-test muna sa iOS at Android bago i-ship.
• Basahin muna ang code bago i-deploy, gaya ng kahit anong copy-paste code.

Official links

You do not have permission to view the full content of this post. Log in or register now.

React to reveal the links. Share niyo sa replies kung saan niyo ginamit: capstone, portfolio o client project!

Credits: Saurabh Chauhan (GitHub: starc007), creator of beUI. Info checked from beui.dev, its changelog and the GitHub repos, October 21, 2026.

 

[JUROKI]

ayuss to thank you bosss

 

[4 0 4]

ayuss to thank you bosss

wlanag anuman bossing