EGDS — Enterprise Grade Design System

A cross-platform design system with 60+ production-ready React components. Built with pure CSS variables, fully tree-shakeable, and supports ESM & CJS.

Installation

npm install @exyconn/egds
# or
yarn add @exyconn/egds
# or
pnpm add @exyconn/egds

Peer Dependencies

npm install react react-dom lucide-react

Quick Start

import { Button, Text, Card } from '@exyconn/egds';

function App() {
  return (
    <Card shadow="md" padding="lg">
      <Text variant="h2">Hello EGDS</Text>
      <Button variant="primary" size="md">Get Started</Button>
    </Card>
  );
}

Tree-Shakeable Imports

Import only what you need for smaller bundles:

import { Button } from '@exyconn/egds/button';
import { Text } from '@exyconn/egds/text';
import { AppBar, Toolbar } from '@exyconn/egds/app-bar';

CSS

Import component styles:

import '@exyconn/egds/styles.css';          // all component styles
// or per-component (tree-shaken):
// import '@exyconn/egds/button/styles.css';

Components

Layout

| Component | Import | Key Props | Description | |-----------|--------|-----------|-------------| | Box | @exyconn/egds/box | as, display (block|flex|grid|inline), padding, margin | Layout wrapper with display modes | | Container | @exyconn/egds/container | maxWidth (sm|md|lg|xl|2xl|full), disableGutters | Responsive max-width container | | Flex | @exyconn/egds/flex | direction, align, justify, wrap, gap (none|xs|sm|md|lg|xl|2xl), inline | Flexbox layout component | | Grid | @exyconn/egds/grid | container, item, columns, spacing, span | CSS Grid layout component | | Stack | @exyconn/egds/stack | direction, spacing, align, justify, wrap, divider | Vertical/horizontal stack layout | | Spacer | @exyconn/egds/spacer | size (xs|sm|md|lg|xl|2xl|3xl), axis (horizontal|vertical) | Fixed spacing between elements | | AspectRatio | @exyconn/egds/aspect-ratio | ratio (1/1|4/3|16/9|21/9|3/2 or number) | Enforces fixed aspect ratio | | Hidden | @exyconn/egds/hidden | above, below, at (breakpoint) | Responsive visibility control | | Responsive | @exyconn/egds/responsive | useBreakpoint() → isMobile, isTablet, isDesktop | Responsive breakpoint utilities |

Navigation

| Component | Import | Key Props | Description | |-----------|--------|-----------|-------------| | AppBar | @exyconn/egds/app-bar | position (static|fixed|sticky|relative), color (primary|default|transparent), elevation, logo | Top navigation bar with optional logo slot | | Toolbar | @exyconn/egds/app-bar | variant (regular|dense), logo | AppBar content wrapper | | ResponsiveAppBar | @exyconn/egds/app-bar | logo, nav[], actions, breakpoint (default 768) | AppBar that collapses nav into a hamburger drawer below breakpoint | | Sidebar | @exyconn/egds/sidebar | width, position (left|right) | Side navigation panel | | SidebarLink | @exyconn/egds/sidebar | label, active, icon, onClick | Sidebar navigation item | | Breadcrumbs | @exyconn/egds/breadcrumbs | items, separator, maxItems | Navigation path indicator | | Tabs | @exyconn/egds/tabs | value, onChange, variant (standard|contained|underline), size (sm|md|lg), fullWidth | Tabbed interface | | Tab | @exyconn/egds/tabs | value, label, icon, disabled | Individual tab item | | TabPanel | @exyconn/egds/tabs | value | Tab content panel | | Menu | @exyconn/egds/menu | open, onClose, anchorEl | Context/dropdown menu | | MenuItem | @exyconn/egds/menu | disabled, icon, selected, onClick | Menu item | | Pagination | @exyconn/egds/pagination | page, totalPages, onChange, siblingCount, size (sm|md|lg) | Page navigation | | Stepper | @exyconn/egds/stepper | activeStep, orientation (horizontal|vertical) | Process step indicator | | Step | @exyconn/egds/stepper | label, description, icon, optional, error | Individual step | | TreeView | @exyconn/egds/tree-view | nodes, onSelect, selected, defaultExpanded, multiSelect | Hierarchical tree navigation |

Inputs & Forms

| Component | Import | Key Props | Description | |-----------|--------|-----------|-------------| | Button | @exyconn/egds/button | variant (primary|secondary|outline|ghost), size (sm|md|lg), loading, disabled, leadingIcon, trailingIcon | Interactive button | | Input | @exyconn/egds/input | label, error, type (text|email|password|number|search), fullWidth, icon, iconPosition | Text input field | | Select | @exyconn/egds/select | options, value, onChange, label, error, size (sm|md|lg), multiple | Dropdown select | | Checkbox | @exyconn/egds/checkbox | checked, onChange, label, color (primary|success|warning|error), size (sm|md|lg), indeterminate | Binary selection input | | Radio | @exyconn/egds/radio | value, checked, onChange, label, color, size | Radio button | | RadioGroup | @exyconn/egds/radio | value, onChange, name, direction | Radio button group | | Switch | @exyconn/egds/switch | checked, onChange, label, color (primary|success|warning|error), size (sm|md|lg) | Toggle switch | | Slider | @exyconn/egds/slider | value, min, max, step, onChange, size (sm|md|lg), showValue | Range slider input | | Autocomplete | @exyconn/egds/autocomplete | options, value, onChange, label, placeholder, error, fullWidth | Input with suggestions | | DatePicker | @exyconn/egds/date-picker | value, onChange, label, min, max, disabled, error | Date selection input | | TimePicker | @exyconn/egds/time-picker | value, onChange, label, use24Hour, minuteStep, disabled | Time selection input | | ColorPicker | @exyconn/egds/color-picker | label, value, onChange, showInput, size (sm|md|lg) | Color selection input | | Rating | @exyconn/egds/rating | value, max, precision (0.5|1), onChange, readOnly, size | Star rating input | | FileUpload | @exyconn/egds/file-upload | label, multiple, accept, maxFiles, variant (dropzone|button|inline) | File upload with dropzone | | Form | @exyconn/egds/form | children, onSubmit | Form wrapper | | FormControl | @exyconn/egds/form | error, disabled, required, fullWidth | Form field wrapper |

Data Display

| Component | Import | Key Props | Description | |-----------|--------|-----------|-------------| | Text | @exyconn/egds/text | variant (h1|h2|h3|h4|body|caption|label), color, align (left|center|right) | Typography component | | Badge | @exyconn/egds/badge | text, variant (filled|outline|subtle), color (primary|success|warning|error|info|neutral), size (sm|md|lg) | Status/count label | | Card | @exyconn/egds/card | padding, shadow (none|xs|sm|md|lg|xl|2xl), onClick | Content container with elevation | | Table | @exyconn/egds/table | variant (default|striped|bordered), size (sm|md|lg), stickyHeader, hoverable | Data table | | TableHeaderCell | @exyconn/egds/table | align, sortable, sortDirection (asc|desc|none), onSort | Sortable header cell | | DataGrid | @exyconn/egds/data-grid | rows, columns, rowKey, pageSize, sortable, hoverable, onRowClick | Advanced data table | | List | @exyconn/egds/list | dense, disablePadding | Vertical list container | | ListItem | @exyconn/egds/list | selected, disabled, icon, secondaryAction, onClick | List item | | Avatar | @exyconn/egds/avatar | src, alt, size (xs|sm|md|lg|xl), variant (circular|rounded|square), initials | User avatar image | | Chip | @exyconn/egds/chip | label, variant (filled|outlined), color (primary|success|warning|error|info|neutral), size (sm|md|lg), onDelete | Compact value chip | | Divider | @exyconn/egds/divider | orientation (horizontal|vertical), spacing (none|xs|sm|md|lg|xl) | Visual separator | | Paper | @exyconn/egds/paper | elevation (0–5), variant (elevation|outlined), square | Surface elevation | | Image | @exyconn/egds/image | src, alt, fit (cover|contain|fill|none|scale-down), rounded (none|sm|md|lg|xl|full) | Image with fit options | | ImageSlider | @exyconn/egds/image-slider | images, height, autoPlay, interval, showIndicators, showArrows | Image carousel |

Charts

| Component | Import | Key Props | Description | |-----------|--------|-----------|-------------| | BarChart | @exyconn/egds/chart | data, horizontal, showValues | Bar chart visualization | | LineChart | @exyconn/egds/chart | data, smooth, showDots, strokeWidth, filled | Line chart visualization | | PieChart | @exyconn/egds/chart | data, donut, size | Pie/donut chart visualization |

Feedback

| Component | Import | Key Props | Description | |-----------|--------|-----------|-------------| | Alert | @exyconn/egds/alert | severity (success|warning|error|info), variant (filled|outlined|standard), title, icon, action | Status alert message | | Snackbar | @exyconn/egds/snackbar | open, message, onClose, autoHideDuration, position (top|bottom|top-left|top-right|bottom-left|bottom-right) | Temporary toast notification | | Dialog | @exyconn/egds/dialog | open, onClose, title, size (sm|md|lg|xl|fullscreen), actions | Modal dialog | | Drawer | @exyconn/egds/drawer | open, onClose, position (left|right|top|bottom), size (sm|md|lg|xl) | Side panel drawer | | Loader | @exyconn/egds/loader | size, color, label | Loading indicator | | Spinner | @exyconn/egds/loader | size (xs|sm|md|lg|xl), color | Spinning loader | | Skeleton | @exyconn/egds/loader | variant (text|circular|rectangular), width, height, animation | Content placeholder | | Progress | @exyconn/egds/loader | value, variant (determinate|indeterminate) | Progress bar | | Tooltip | @exyconn/egds/tooltip | title, placement (top|bottom|left|right), delay | Hover tooltip | | Backdrop | @exyconn/egds/backdrop | open, variant (transparent|dim|glass|fog), onClick, blurAmount | Overlay backdrop |

Editors

| Component | Import | Key Props | Description | |-----------|--------|-----------|-------------| | CodeEditor | @exyconn/egds/code-editor | value, onChange, language (javascript|typescript|json|html|css|python|markdown), readOnly, lineNumbers | Code editor with syntax highlighting | | RichTextEditor | @exyconn/egds/rich-text-editor | value, onChange, formats (bold|italic|underline|strikethrough|code|link), readOnly | WYSIWYG text editor |

Overlay & Utility

| Component | Import | Key Props | Description | |-----------|--------|-----------|-------------| | Accordion | @exyconn/egds/accordion | expanded, onChange, disabled, defaultExpanded | Collapsible content panel | | CommandPalette | @exyconn/egds/command | open, onClose, items, placeholder | Command/search palette | | ChatBubble | @exyconn/egds/chat | content, sender, timestamp, avatar | Chat message bubble | | MessageList | @exyconn/egds/chat | messages | Chat message list | | ChatInput | @exyconn/egds/chat | value, onChange, onSend | Simple chat text input | | EgdsChatInput | @exyconn/egds/chat-input | value, onChange, onSend, leadingActions[], trailingActions[], size (sm|md|lg), variant (filled|outline), maxLength, minRows, maxRows, loading, submitOnEnter | Full-featured chat input with auto-resize, attachments slot, send button & optional character counter | | Portal | @exyconn/egds/portal | children | Renders children into a portal | | ClickAway | @exyconn/egds/click-away | onClickAway, children | Detects clicks outside | | FocusTrap | @exyconn/egds/focus-trap | active, children | Traps keyboard focus | | ScrollArea | @exyconn/egds/scroll-area | maxHeight, direction (vertical|horizontal|both) | Custom scroll container | | Transition | @exyconn/egds/transition | show, type (fade|slide-up|slide-down|scale|none), duration, delay | Animation wrapper | | Fade | @exyconn/egds/transition | show, duration | Fade animation | | Slide | @exyconn/egds/transition | show, duration | Slide animation | | Scale | @exyconn/egds/transition | show, duration | Scale animation |

Theming & Tokens

| Component | Import | Key Props | Description | |-----------|--------|-----------|-------------| | ThemeProvider | @exyconn/egds/theme | defaultMode (light|dark|system), overrides (primaryColor, borderRadius, spacingScale, fontFamily) | Theme mode & customization | | TokenProvider | @exyconn/egds/tokens | tokens, mode | Design token injection via CSS variables | | Icons | @exyconn/egds/icons | 100+ icons from lucide-react | <Search />, <Home />, <Settings />, <User />, etc. |

TypeScript

All components are fully typed. Import types alongside components:

import { Button } from '@exyconn/egds/button';
import type { ButtonProps, ButtonVariant, ButtonSize } from '@exyconn/egds/button';

License

MIT