A comprehensive, categorized metadata structure for tech stacks with React Icons integration — the perfect foundation for developer portfolios, dashboards, and project showcases.
Technologies
Categories
TypeScript
Tree-shakable
A comprehensive, well-organized collection of technology metadata designed for modern web applications
Well-organized technology metadata grouped by categories including frontend, backend, databases, languages, and more.
Over 200 popular technologies, frameworks, and tools pre-configured and ready to use in your projects.
Each technology comes pre-mapped with the appropriate icon from react-icons for perfect visual representation.
Fully typed with TypeScript for better development experience, autocompletion, and type safety.
Import only what you need with tree-shaking support to keep your bundle size small and efficient.
Simple structure that allows for easy customization and extension with your own custom tech entries.
Regularly updated to include new technologies and maintain compatibility with the latest frameworks.
Example components and patterns for displaying tech stacks in your applications with minimal effort.
Works with any React-based project including Next.js, Remix, Gatsby, and vanilla React applications.
Browse our comprehensive collection of technologies organized by category
TS, JavaScript with Types
JS, ECMAScript
py
C Language, C Programming
C Plus Plus
PHP Hypertext Preprocessor
HTML5, Markup Language
CSS3, Stylesheets
Shell Scripting, Terminal Scripts
Golang, Go Language
Systems Programming, Memory Safety
Android Development, JVM Language
iOS Development, Apple Development
Rails Language, Dynamic Programming
GQL, API Query Language
React.js, ReactJS
RN, Mobile Development
NextJS, Next, React Framework
Vue, Progressive JavaScript Framework
Angular Framework, TypeScript Framework
Svelte Framework, Compiler-based Framework
Remix Framework, React Router Framework
Express, Node.js Framework
Nest, Node.js Framework
Python Framework
Fast API, Python API Framework
Django Framework, Python Web Framework
Spring, Java Framework
PHP Framework, Web Application Framework
Tailwind, TailwindCSS, Utility CSS
BS, Twitter Bootstrap
JS Library
3D Graphics, WebGL
GreenSock, Animation Platform
Shadcn UI, UI Components
Chakra, Component Library
Motion Library, Animation Framework
TypeScript RPC, API Framework
ORM, Database Toolkit
Vite.js, Build Tool
GraphQL Engine, API Platform
OpenAPI, API Documentation
API Testing, API Development
K8s, Container Orchestration
Infrastructure as Code, IaC
CI/CD, Continuous Integration
GitLab CI/CD, Continuous Integration
CI/CD, Workflow Automation
Configuration Management, Infrastructure Automation
Android IDE, Mobile Development
Virtual Machine Management
IDE, JavaScript IDE
API Client, API Testing
VSCode, Code Editor
Productivity, Note-taking
Team Communication, Collaboration
Java IDE, JetBrains IDE
Python IDE, JetBrains IDE
XD, UI/UX Design Tool
UI Design Tool, Collaborative Design
Project Management, Issue Tracking
Deployment Platform, Serverless Hosting
Mongo, NoSQL Database
Postgres, SQL Database
SQL Database
MySQL Fork, SQL Database
In-Memory Database, Cache
Spreadsheet Database
Embedded Database, Local SQL Database
ELK Stack, Search Engine Database
Apache Cassandra, NoSQL Database, Distributed Database
Graph Database, Graph Database Management System
AWS DynamoDB, NoSQL Database Service
Open Source Firebase Alternative, BaaS
Google Firebase, BaaS, Cloud Services
NodeJS, Node, JavaScript Runtime
Penetration Testing OS
Linux Distribution, Operating System
Network Mapper, Port Scanner
Penetration Testing, Exploit Framework
Packet Analyzer, Network Protocol Analyzer
WiFi Security, Wireless Cracking
Web Security Testing, Web Application Scanner
Web Security Risks, OWASP
Cryptography, SSL/TLS
Network Intrusion Detection, IDS
3D Modeling, Animation, Rendering
UE, Game Engine, Real-time 3D
Version Control, VCS
Containers, Containerization
Authentication, User Management
NextAuth, Authentication for Next.js
Authentication Platform, Identity Management
Node.js Authentication, Authentication Middleware
Open Source IAM, Identity and Access Management
Authorization Framework, Authentication Protocol
Get up and running in minutes with our simple installation and usage guide
npm install @exlaso/tech-stack-metadatapnpm add @exlaso/tech-stack-metadatayarn add @exlaso/tech-stack-metadataCreate beautiful tech stack displays for your portfolio, resume, or project documentation
Create reusable components to display tech stacks in your applications.
import React from "react";
import { frontend, backend, databases } from "@exlaso/tech-stack-metadata";
export function ProjectTechStack({ projectId }) {
// Example project tech stacks
const projects = {
portfolio: ["REACT_JS", "NEXT_JS", "TAILWIND_CSS", "TYPESCRIPT"],
dashboard: ["NODE_JS", "MONGODB"],
// ...more projects
};
// Get tech keys for the project
const techKeys = projects[projectId] || [];
// Get full tech metadata for each key
const techStack = techKeys.map(key => {
// Search in each category
return getTechMetaData(key)
}).filter(Boolean);
return (
<div className="flex flex-wrap gap-2">
{techStack.map(tech => (
<div key={tech.key} className="flex items-center gap-2 p-2 bg-gray-100 rounded">
<tech.icon size={20} />
<span>{tech.name}</span>
</div>
))}
</div>
);
}Example of how tech stacks appear in your portfolio or documentation.
Common questions about using tech stack metadata in your projects
Join hundreds of developers who use our tech stack metadata for their portfolios, documentation sites, and project showcases.
...
GitHub Stars
...
Weekly Downloads
...
Contributors
...
Happy Developers