Tailwind Resources Logo Tailwind Resources
Geist screenshot

Geist

Author Avatar Theme by Shyakadavis
Updated: 24 Jun 2025
109 Stars

Svelte implementation of Vercel's Design System. (WIP)

Github Live Preview

Categories

Svelte Vite

Overview

Geist is a Svelte-based implementation of the popular Geist Design System created by Vercel. While still a work in progress, this project aims to provide developers with access to the design principles and components found in the original system. It promises a seamless experience by keeping the APIs closely aligned with the original Geist offerings, making it a valuable tool for developers looking to integrate modern design without sacrificing functionality.

This implementation is not a standalone component library, which offers flexibility for developers. It’s built using shadcn-svelte, providing a solid foundation for customization and extension. Overall, Geist is an exciting initiative for Svelte users aiming to harness a well-structured design system while fostering community contributions.

Features

  • Svelte Integration: Built with Svelte, combining the flexibility of reactive programming with a modern design ethos.
  • API Consistency: The project strives to maintain APIs that are as close to the original Geist system as possible, enhancing usability for existing users.
  • Theming Capability: Easy theming options with the addition of the <ModeWatcher/> component, allowing for dynamic style adjustments throughout the application.
  • Svg Plugin Support: Provides built-in support for SVGs, making it simpler to implement icons and graphics within your app.
  • Tailwind CSS Ready: Integration with Tailwind CSS ensures streamlined styling and customization options straight out of the box.
  • Community Contributions: Encourages developers to contribute, fostering a collaborative environment that enriches the project.
  • User-Friendly Setup: Setup instructions that guide users through installation and configuration, making it approachable for developers of all levels.
  • Development Focused: Not simply a component library, but a toolbox for creating tailored design solutions, allowing for high degrees of creativity.