Terra UI Components
- Framework agnostic 🧩
- Horizon Design System compliant 🎨
- Fully accessible ♿️
- Dark mode support 🌛
- TypeScript support 📘
- Open source 😸
What is Terra UI?
Terra UI Components is a collection of reusable web components built on web standards and designed to work with NASA’s Horizon Design System. These components are framework-agnostic and can be used with React, Vue, Angular, or vanilla JavaScript.
Quick Start
Add the following code to your page:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/themes/horizon.css" /> <script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/terra-ui-components-autoloader.js"></script>
Now you can use any Terra UI component:
This uses the autoloader, which registers components automatically. For other installation methods, see the Installation Guide.
Key Features
- Framework Agnostic: Works with any modern framework or vanilla JavaScript
- Horizon Design System: Built to match NASA’s design standards
- Accessible: WCAG compliant with full keyboard and screen reader support
- Customizable: Fully customizable with CSS variables and design tokens
- Dark Mode: Built-in dark theme support
- TypeScript: Fully typed with TypeScript definitions
Browser Support
Terra UI Components is tested in the latest two versions of Chrome, Edge, Firefox, Opera, and Safari.
Next Steps
- Installation Guide - Get started with Terra UI
- Components - Browse available components
- Design System - Learn about design tokens and theming
- Contributing - Contribute to the project