Terra Libraries
At Terra, we’re all about building smart, high-performance tools that simplify web development without cutting corners. Over time, we’ve created a set of libraries designed to reduce friction in the build process, help teams move faster, and keep the quality bar high—no matter the size or scope of the project.
These libraries aren’t just utilities—they’re based on real-world needs and lessons learned across dozens of projects. Whether you’re optimizing loading times, handling user interaction, or integrating third-party services, our packages are built to be easy to adopt, lightweight, and flexible enough to drop into any workflow.
By offloading common tasks and offering reliable building blocks, Terra’s pre-built tools let developers focus more on problem-solving and creativity—less on boilerplate. All packages are performance-optimized, well-tested, and fully documented.
Explore the list below to learn how each library works, with real examples and use cases to get you started quickly. These tools are built to help you ship faster—and better.
A collection of small but powerful utility functions that cover everything from preloading images to adding reCAPTCHA or integrating HubSpot forms. This is our internal Swiss army knife—designed to solve common tasks with clean, reusable logic. Perfect for performance improvements and third-party integrations.
A simple but effective utility to toggle visibility or collapse sections of a page with smooth transitions. Ideal for accordions, FAQs, expandable menus, or any layout that requires interactive show/hide behavior—without relying on bulky libraries. It handles ARIA roles, animations, and accessibility out of the box.
This library allows smooth scrolling to anchors with customizable offsets and easing. It’s especially useful for one-page sites or navigating between sections of a long scroll. It also includes support for popstate behavior and emits useful events, making it easy to integrate into complex SPA setups.
A lightweight foundation for Vue.js projects, vue-core bundles together common patterns, lifecycle helpers, composables, and transition utilities that we’ve standardized across our Vue stack. It promotes consistency, reduces boilerplate, and speeds up onboarding for new projects or team members.
A shared utility layer for Astro projects, built to encapsulate common functionality like DOM hydration patterns, script loading strategies, and Swup-ready behaviors. It’s the go-to package to unify how we handle transitions, lifecycle events, and performance tweaks in Astro.
A minimal and accessible modal library that plays well with both vanilla JS and frameworks like Vue or Astro. modal gives you control over focus traps, transitions, and close behavior without the complexity of larger UI libraries. It’s fully keyboard-navigable and customizable via CSS.
A flexible counter component built for quick setup in marketing sites, dashboards, or any place where animated numbers matter. It supports customizable start/end values, durations, and easing functions—perfect for animating stats or KPIs on scroll or user interaction.
Our component-driven design system provides a consistent, scalable foundation for building user interfaces across all Terra projects. It includes standardized UI components, global styles, utility classes, and design tokens—everything you need to maintain visual consistency and speed up development. Built with flexibility in mind, it works seamlessly in both Vue and Astro environments.
Deprecated Packages
Section titled “Deprecated Packages”While we continue to improve and maintain our core libraries, a few older packages have been deprecated and replaced with more modern or consolidated alternatives. These are kept available for legacy projects but are no longer recommended for new development:
- @terrahq/vue-form – Deprecated.
- @terrahq/form – Deprecated.
- @terrahq/timage – Deprecated. Previously used for image components and lazy-loading, now handled through
vue-core.
Each of these libraries is designed to solve a specific problem with minimal setup and maximum clarity. Try them out, mix and match, and see how they can speed up your development flow—without sacrificing control or performance.