Terra Libraries
At Terra, we build lightweight, high-performance libraries that make web development faster and more reliable—without sacrificing quality.
These tools are based on real needs and patterns we’ve encountered across many projects. They help solve common problems like performance optimization, user interactions, and third-party integrations, while staying flexible enough to fit into any workflow.
By handling repetitive or complex tasks for you, our libraries let developers focus on building features and solving problems instead of writing boilerplate. All packages are optimized for performance, easy to adopt, well tested, and fully documented.
Explore the libraries below to see how each one works, with practical examples and real use cases to help you get started quickly.
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.
Knowledge Check
Test your understanding of this section
Loading questions...