eglador-ui-react
Eglador UI for React — headless, accessible component library. Compound subcomponents, Tailwind CSS v4, zero runtime dependencies.
Status: Alpha — 65/65 components shipped.
Installation
npm install eglador-ui-react
Peer dependencies: react ^19 · react-dom ^19 · tailwindcss ^4
Setup
/* app/globals.css */
@import "tailwindcss";
@source "../node_modules/eglador-ui-react";
| Framework | CSS file location | Path |
|---|---|---|
| Next.js (App Router) | app/globals.css | ../node_modules/eglador-ui-react |
Next.js (src/) | src/app/globals.css | ../../node_modules/eglador-ui-react |
| Vite | src/index.css | ../node_modules/eglador-ui-react |
Conventions
All components share the same vocabulary:
- Variants (visual hierarchy):
solid·soft·outline·ghost·link - Sizes:
xs·sm·md·lg·xl - Shapes:
square·rounded·pill·circle - Palette: zinc-only (no color schemes; theming handled separately)
- A11y: native HTML inputs,
aria-*attributes, focus-visible rings, RTL-safe Tailwind logical properties
Z-index hierarchy
Baslangic 1000+ — tuketici uygulamasinin tipik z-10 / z-20 / z-50 z-index araligindan yuksek, cakisma yok.
| Layer | Z-Index | Components |
|---|---|---|
| Modal | z-[1000] | Dialog, AlertDialog, Drawer, Sidebar (mobile) |
| Floating popup | z-[1100] | Popover, Combobox, Select, MultiSelect, ColorPicker, Dropdown, ContextMenu, Menubar, HoverCard, NavigationMenu |
| Tooltip | z-[1200] | Tooltip |
| Notification | z-[1300] | Notification |
Components (65/65)
Layout & Structure (7/7) — ✓ Accordion · ✓ AspectRatio · ✓ Collapsible · ✓ Resizable · ✓ ScrollArea · ✓ Separator · ✓ Sidebar
Display (8/8) — ✓ Avatar · ✓ Badge · ✓ Card · ✓ Empty · ✓ Kbd · ✓ Skeleton · ✓ Spinner · ✓ Typography
Navigation (7/7) — ✓ Breadcrumb · ✓ Menubar · ✓ NavigationMenu · ✓ Pagination · ✓ Stepper · ✓ Tabs · ✓ TreeView
Forms (24/24) — ✓ Button · ✓ ButtonGroup · ✓ Checkbox · ✓ CheckboxGroup · ✓ ColorPicker · ✓ Combobox · ✓ Dropzone · ✓ Form · ✓ Input · ✓ InputGroup · ✓ InputOTP · ✓ InputTag · ✓ Label · ✓ MultiSelect · ✓ NativeSelect · ✓ NumberInput · ✓ Radio · ✓ RadioGroup · ✓ Select · ✓ Slider · ✓ Switch · ✓ Textarea · ✓ Toggle · ✓ ToggleGroup
Date & Time (3/3) — ✓ Calendar · ✓ DatePicker · ✓ DateTimePicker
Overlays (10/10) — ✓ Alert · ✓ AlertDialog · ✓ ContextMenu · ✓ Dialog · ✓ Drawer · ✓ Dropdown · ✓ HoverCard · ✓ Notification · ✓ Popover · ✓ Tooltip
Data (1/1) — ✓ Table
Misc (5/5) — ✓ Command · ✓ ImageCropper · ✓ Link · ✓ Progress · ✓ SpeedDial
Compatibility
Works with any React-based framework: Next.js 16+, Remix, Vite + React, Gatsby.
Components are marked "use client". Place them inside a client component or after a "use client" directive.
Development
npm install
npm run dev # tsup watch mode
npm run build # production build to dist/
npm run typecheck # tsc --noEmit
npm run storybook # Storybook dev (http://localhost:6006)
npm run build-storybook # static Storybook export
Publishing
Publishing is automated via GitHub Actions. When a GitHub Release is created, the package is published to npm.
- Update
versioninpackage.json - Commit and push
- Create a GitHub Release with a matching tag (e.g.
v1.0.0)
Author
Kenan Gündoğan — https://github.com/kenangundogan
Maintained under Eglador
License
MIT