Introduction

Overview

This site provides code snippets for UI components based on the exaBase Design System. Exabase Design System is a comprehensive collection of reusable components, design tokens, and guidelines that help you build consistent and accessible user interfaces.

Developers and designers can copy the code snippets and paste them into their own applications to immediately use the sophisticated UI baseline. If product-specific behavior is needed to improve the UX, you can customize the pasted code.

Features

• 🎨 Theming Support - Customize colors, typography, and more
• 🌙 Dark Mode - Built-in dark mode support
• ♿ Accessible - WCAG compliant components
• 📦 Tree-shakeable - Import only what you need
• 🎯 TypeScript - Full TypeScript support

Getting Started

To get started with Exabase Design System, choose your installation method:

• Next.js Installation
• Vite Installation
• Manual Installation

After installation, you can explore:

• Theming
• Dark Mode
• Components
• Icons

Inspirations and Dependencies

The components and snippets here are based on and compatible with the innovative shadcn/ui. Tailwind CSS is used for styling, and many components are built on Base UI for accessible, dynamic interaction. exaBase Design System Icons are used for the icons.

License

Most of the content including snippets in this site were taken from shadcn/ui. Our own changes and additions are licensed under CC BY 4.0.