reablocks

50+ UI components for React based on Tailwind.

         

---

🚀 Quick Links

• Website
• Docs
• Blocks
• Storybook
• CLI
• Changelog

🎁 Other Projects

• Reagraph - Open-source library for large webgl based network graphs.
• Reaviz - Open-source library for data visualizations for React.
• Reachat - Open-source library for building LLM/Chat UIs for React.
• Reaflow - Open-source library for workflow and diagram graphs.

🔭 Development

If you want to run reablocks locally, its super easy!

• Clone the repository
• npm i
• npm start
• Browser opens to Storybook page

🧪 Visual Regression Testing

This project uses Playwright to screenshot every Storybook story and catch unintended visual changes.

Prerequisites: Storybook must be running on localhost:9009 (or Playwright will start it automatically).

# Run visual tests against existing baseline screenshots
npm run test:visual

# Update baseline screenshots (after intentional visual changes)
npm run test:visual:update

test:visual:extract runs automatically as part of both commands — it fetches the story list from Storybook so Playwright knows what to screenshot.

❤️ Contributors & Credits

Thanks to all our contributors!