@mohammedshuaau/snappy-ui NPM

🎨 Snap Kit

A modern, fully-featured React component library built with TypeScript and Tailwind CSS.

📚 Documentation

For detailed documentation, live examples, and usage guidelines for all components, check out our Storybook. Each component includes:

Interactive examples
Props API reference
Usage guidelines
Customization options
Accessibility notes

✨ Features

📦 70+ Production-Ready Components
🎯 TypeScript First Approach
🎨 Tailwind CSS Styling
🌙 Dark Mode Support
♿ Accessibility Built-in
📱 Responsive Design
⌨️ Keyboard Navigation
🔍 Screen Reader Support
🎭 Customizable Themes
📚 Comprehensive Documentation
✅ Unit Tests
🔧 Easy to Extend

📦 Installation

# Using npm
npm install @mohammedshuaau/snappy-ui

# Using yarn
yarn add @mohammedshuaau/snappy-ui

# Using pnpm
pnpm add @mohammedshuaau/snappy-ui

🚀 Quick Start

import { Button, Input } from '@mohammedshuaau/snappy-ui';

function App() {
  return (
    <div>
      <Input placeholder="Enter your name" />
      <Button variant="primary">Click me!</Button>
    </div>
  );
}

📚 Components

Data Display

🪗 Accordion
👤 Avatar
🎴 Card
📝 List
📊 Progress
💀 Skeleton
📋 Table
🏷️ Tag
⏳ Timeline
🌳 Tree
📜 Typography

Feedback

⚠️ Alert
🔰 Badge
💬 Dialog
🔄 LoadingOverlay
📨 Message
💭 Popover
🌀 Spinner
🍞 Toast
💡 Tooltip

Layout

📐 AspectRatio
📦 Box
🏢 Container
➖ Divider
💪 Flex
🎯 Grid
🌌 Spacer
📚 Stack

Media

🔊 Audio
🎨 Icon
🖼️ Image
🎥 Video

Navigation

🍞 Breadcrumb
🔗 Link
📑 Menu
🧭 Navbar
📄 Pagination
📌 Sidebar
🪜 Stepper
📑 Tabs

Form

🔘 Button
✅ Checkbox
🎨 ColorPicker
📅 DatePicker
📆 DateRangePicker
⏰ DateTimePicker
📁 FileUpload
📝 Form
⌨️ Input
🔢 NumberInput
🔑 PasswordInput
⭕ Radio
📝 RichTextEditor
📊 Select
🎚️ Slider
🔄 Switch
📝 Textarea
⏰ TimePicker

Advanced

📅 Calendar
👨‍💻 CodeEditor
⌨️ CommandPalette
🎯 DragAndDrop
♾️ InfiniteScroll
📋 KanbanBoard
📝 Markdown
↔️ ResizablePanel
📜 VirtualList

Charts

📊 BarChart
🌡️ Heatmap
📈 LineChart
🥧 PieChart
🎯 Gauge
⭕ ProgressCircle
✨ Sparkline
📊 StatCard

🎨 Customization

Snap Kit components can be customized using:

Variant Props: Built-in variants for different styles
sx Prop: Direct style overrides
className: Tailwind CSS classes
Theme: Global theme customization

// Using variants
<Button variant="primary" size="lg" />

// Using sx prop
<Box sx={{ backgroundColor: '#f0f0f0', padding: '1rem' }} />

// Using className
<Card className="shadow-lg hover:shadow-xl" />