https://github.com/ehsangazar/design-system
Design System Made by Gaz
https://github.com/ehsangazar/design-system
design-systems
Last synced: 9 months ago
JSON representation
Design System Made by Gaz
- Host: GitHub
- URL: https://github.com/ehsangazar/design-system
- Owner: ehsangazar
- Created: 2024-11-23T22:30:40.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-12-22T03:07:27.000Z (10 months ago)
- Last Synced: 2025-01-22T10:48:05.049Z (9 months ago)
- Topics: design-systems
- Language: CSS
- Homepage: https://ehsangazar.github.io/design-system/?path=/docs/theme-introduction--docs
- Size: 5.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
Here's your content in Markdown format:
# Introduction to Design System Gaz
## Installation
To install the Gaz Design System, run the following command:
```bash
npm install @ehsangazar/design-system
```
## Usage
Wrap your application with the `ThemeWrapper` component to apply theming and enable the design system:
```javascript
import { ThemeWrapper } from "@ehsangazar/design-system";
import "@ehsangazar/design-system/dist/design-system.css";
;
```
## Overview
Gaz Design System is a comprehensive UI component library built on top of Radix UI. It offers a collection of accessible and customizable components with opinionated defaults, providing a robust foundation for building modern web applications that prioritize consistency and accessibility.
## Key Features
- **Built on Radix UI primitives**: Leverages Radix UI for accessible and high-quality base components.
- **Fully accessible components**: Ensures inclusive design by default.
- **Dark/Light mode support**: Seamless support for both dark and light themes.
- **Customizable theming**: Easily adapt to your brand’s style with flexible theming options.
- **Type-safe with TypeScript**: Provides strong type safety for better developer experience.
- **Modern design patterns**: Implements best practices for UI design.
- **Consistent APIs**: Ensures intuitive and uniform APIs across components.
## Available Components
The Gaz Design System includes a variety of commonly used components, such as:
- **Buttons**
- **Input fields**
- **Modal dialogs**
- **Navigation menus**
- **Form elements**
- **Typography**
- **Layout components**
## Customization
Although the design system provides opinionated defaults, it is highly customizable. Use the `customTheme` prop in the `ThemeWrapper` component to tailor the appearance to your needs. You can modify design tokens such as colors, spacing, and typography to align with your brand.