https://github.com/wghglory/gloryui-react
Derek React Components Library
https://github.com/wghglory/gloryui-react
react-library
Last synced: 14 days ago
JSON representation
Derek React Components Library
- Host: GitHub
- URL: https://github.com/wghglory/gloryui-react
- Owner: wghglory
- Created: 2022-02-20T11:14:34.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2025-12-20T07:18:04.000Z (about 1 month ago)
- Last Synced: 2025-12-22T01:14:32.913Z (about 1 month ago)
- Topics: react-library
- Language: TypeScript
- Homepage:
- Size: 2.25 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# gloryui-react
A modern React components library built with TypeScript, Tailwind CSS, and shadcn/ui patterns.
## 🚀 Getting Started
### Installation
```bash
npm install gloryui-react
```
### Development
This project uses a two-terminal workflow for development:
**Terminal 1 - Build Watch Mode:**
```bash
npm run dev
```
This runs `tsup --watch` which:
- Watches for file changes in `src/`
- Automatically rebuilds the library
- Outputs to `dist/` directory
- Does NOT open a URL (it's just a build tool)
**Terminal 2 - Storybook (Component Development):**
```bash
npm run storybook
```
This starts the Storybook dev server:
- Opens at **http://localhost:6006**
- Provides visual component development environment
- Hot reloads when you make changes
- Interactive component playground
### Build
```bash
npm run build
```
Builds the library for production:
- Generates CJS and ESM formats
- Outputs TypeScript declarations
- Processes Tailwind CSS
- Minifies code
### Other Scripts
```bash
npm test # Run tests with Jest
npm run build-storybook # Build static Storybook site
```
## 🛠️ Tech Stack
- **Build Tool**: tsup (modern, fast TypeScript bundler)
- **Styling**: Tailwind CSS with shadcn/ui design system
- **UI Primitives**: Headless UI, Radix UI
- **Component Development**: Storybook
- **Testing**: Jest + React Testing Library
## 📦 Components
### DrButton
A flexible button component with multiple variants and sizes.
```tsx
import { DrButton } from 'gloryui-react';
;
```
**Props:**
- `label` (string, required) - Button text
- `variant` ('default' | 'outline' | 'ghost') - Button style variant
- `size` ('sm' | 'md' | 'lg') - Button size
- `className` (string, optional) - Additional CSS classes
### DrAspectRatio
Display a DOM element with fixed aspect ratios: `1:1`, `4:3`, or `16:9`.
```tsx
import { DrAspectRatio } from 'gloryui-react';
;
```
**Props:**
- `ratio` ('1:1' | '4:3' | '16:9', required) - Aspect ratio
- `containerClass` (string, optional) - Additional CSS classes for container
- `children` (ReactNode, required) - Content to display