@opengrid/react

OpenGrid Design System - A comprehensive React component library with 81 production-ready components.

🚀 Installation

npm install @opengrid/react
# or
yarn add @opengrid/react
# or
pnpm add @opengrid/react

📦 Components

Basic Components (15)

Alert, Avatar, Badge, Box, Breadcrumbs, Card, Chip, Container, Divider, Link, List, Paper, Skeleton, Stack, Tooltip

Form Components (14)

Autocomplete, Checkbox, ColorPicker, DatePicker, NumberField, Radio, Select, Signature, Slider, Switch, TextArea, TextField, Upload, VerificationCode

Navigation Components (7)

AppBar, BottomNavigation, Menu, Pagination, SpeedDial, Stepper, Tabs

Feedback Components (6)

Backdrop, Dialog, Modal, Progress, Snackbar, Loader

Data Display Components (7)

Charts, ImageList, Rating, Table, TransferList, TreeView, OrderSummary

Interactive Components (8)

Button, ButtonGroup, FloatingActionButton, ToggleButton, Drawer, ActionSheet, Camera, Map

Advanced/AI Components (11)

AIChatbot, CodeGenerator, ImageGenerator, TextGenerator, VideoGenerator, VoiceChatbot, VoiceUI, DataQuery, Whiteboard, QRCode, CreditCard

Media/Visual Components (9)

AnimationPreview, EmojisPreview, IconsPreview, IllustrationsPreview, VideoPlayer, TypographyPreview, FontAwesomeWrapper, ShoppingCart, VirtualKeyboard

Effects/Decorative (4)

InteractiveCursor, MagnetLines, PixelTrail, DecayCard

💡 Usage

import { Button, Card, TextField } from '@opengrid/react';

function App() {
  return (
    <Card>
      <TextField label="Name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

🎨 Features

• ✅ 81 Production-ready components
• ✅ TypeScript support
• ✅ Fully customizable
• ✅ Responsive design
• ✅ Dark mode support
• ✅ Accessibility compliant
• ✅ Tree-shakeable
• ✅ Zero dependencies (except peer deps)

📖 Documentation

Visit https://opengrid.design for full documentation.

📄 License

MIT © OpenGrid Team