🎨 Vibe Slack UI

A modern, accessible React component library inspired by Slack's design system, built with TypeScript and Tailwind CSS.

✨ Features

• 🎯 Slack-Inspired Design - Faithful recreation of Slack's polished UI patterns
• 🔧 TypeScript First - Full type safety and IntelliSense support
• 🎨 Tailwind CSS - Powered by Tailwind v4 for modern styling
• ♿ Accessible - Built with accessibility in mind (keyboard navigation, ARIA labels)
• 🪶 Lightweight - Tree-shakeable components with minimal dependencies
• 🚀 Modern React - Built with React 19 and latest best practices
• 📦 Easy Integration - Simple API with comprehensive examples

📦 Installation

npm install @xyhp915/vibe-slack-ui

Peer Dependencies

Make sure you have these installed:

npm install react react-dom lucide-react

🚀 Quick Start

import { SlackButton, SlackDialog, SlackInput, dialog } from '@xyhp915/vibe-slack-ui';

function App() {
  const handleClick = () => {
    dialog.alert({
      title: 'Welcome to Vibe!',
      message: 'Start building beautiful Slack-like interfaces.',
    });
  };

  return (
    <div>
      <SlackButton variant="primary" onClick={handleClick}>
        Open Dialog
      </SlackButton>
    </div>
  );
}

📚 Components

Form Controls

🔘 SlackButton

Primary button component with multiple variants and sizes.

<SlackButton variant="primary" size="medium">
  Click Me
</SlackButton>

Variants: primary | secondary | danger | ghost | outline
Sizes: small | medium | large

🔘 SlackButtonGroup

Group buttons together with consistent spacing.

<SlackButtonGroup orientation="horizontal" spacing="normal">
  <SlackButton variant="primary">Save</SlackButton>
  <SlackButton variant="secondary">Cancel</SlackButton>
</SlackButtonGroup>

📝 SlackInput & SlackTextarea

Form input components with Slack's clean styling.

<SlackInput
  label="Email"
  placeholder="[email protected]"
  required
/>

<SlackTextarea
  label="Message"
  rows={4}
  placeholder="Enter your message..."
/>

☑️ SlackCheckbox

Checkbox component with indeterminate state support.

<SlackCheckbox
  label="Accept terms"
  checked={accepted}
  onChange={(e) => setAccepted(e.target.checked)}
/>

🔘 SlackRadio & SlackRadioGroup

Radio button components for mutually exclusive selections.

<SlackRadioGroup
  name="priority"
  value={priority}
  onChange={(value) => setPriority(value)}
>
  <SlackRadio value="low" label="Low" />
  <SlackRadio value="high" label="High" />
</SlackRadioGroup>

📋 SlackSelect & SlackSelectButton

Dropdown select components with rich options.

<SlackSelect
  label="Choose a channel"
  options={[
    { value: 'general', label: 'General' },
    { value: 'random', label: 'Random' },
  ]}
  onChange={(value) => setChannel(value)}
/>

Overlays & Feedback

💬 SlackDialog

Modal dialog component with imperative and declarative APIs.

// Imperative API - Simple Dialog
dialog.open({
  title: 'Custom Dialog',
  content: <div>Your custom content here</div>,
  size: 'medium',
});

// Imperative API - Alert
dialog.alert({
  title: 'Success',
  message: 'Your changes have been saved!',
  onClose: () => console.log('Alert closed'),
});

// Imperative API - Confirm
dialog.confirm({
  title: 'Confirm Action',
  message: 'Are you sure you want to continue?',
  confirmText: 'Yes, Continue',
  cancelText: 'Cancel',
  onConfirm: () => console.log('Confirmed!'),
  onCancel: () => console.log('Cancelled'),
});

// Declarative API
<SlackDialog
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Custom Dialog"
>
  <p>Your custom content here</p>
</SlackDialog>

📦 SlackPopup

Tooltip-like popup component with flexible positioning.

<SlackPopup
  trigger={<button>Hover me</button>}
  content="This is a helpful tooltip"
  position="top"
/>

🎯 SlackDropdown

Advanced dropdown menu with keyboard navigation, checkboxes, and nested submenus.

import { Edit, Trash, Share, Mail, Link } from 'lucide-react';

<SlackDropdown
  trigger={<SlackButton>Menu</SlackButton>}
  options={[
    { label: 'Edit', value: 'edit', icon: <Edit size={16} /> },
    { label: 'Delete', value: 'delete', icon: <Trash size={16} />, danger: true },
    { divider: true, label: '', value: 'divider1' },
    {
      label: 'Share',
      value: 'share',
      icon: <Share size={16} />,
      submenu: [
        { label: 'Email', value: 'share-email', icon: <Mail size={16} /> },
        { label: 'Link', value: 'share-link', icon: <Link size={16} /> },
      ],
    },
  ]}
  onSelect={(value) => {
    console.log('Selected:', value);
    // Handle your action based on value
  }}
/>

Features:

• ⌨️ Full keyboard navigation (Arrow keys, Enter, Escape)
• ☑️ Checkbox mode for multi-select
• 📁 Nested submenus (unlimited depth)
• 🎨 Custom icons via Lucide React
• ♿ Accessibility built-in

🔔 SlackNotification

Toast notification system with stacking and animations.

// Use the notification provider
import { NotificationProvider, useNotification } from '@xyhp915/vibe-slack-ui';

function App() {
  return (
    <NotificationProvider defaultPosition="top-right">
      <YourApp />
    </NotificationProvider>
  );
}

function YourComponent() {
  const { addNotification } = useNotification();

  const notify = () => {
    addNotification({
      title: 'Success!',
      message: 'Your changes have been saved.',
      type: 'success',
      duration: 3000,
    });
  };

  return <button onClick={notify}>Notify</button>;
}

Types: success | error | warning | info
Positions: top-left | top-center | top-right | bottom-left | bottom-center | bottom-right

🏷️ SlackBadge

Badge component for status indicators and counts.

<SlackBadge variant="success">Online</SlackBadge>
<SlackBadge variant="danger" count={5} />

⚠️ SlackAlert

Alert component for important messages.

<SlackAlert
  type="warning"
  title="Attention Required"
  message="Please verify your email address."
  dismissible
/>

🎨 Styling

This library uses Tailwind CSS v4. Make sure your project is configured to use Tailwind CSS:

/* index.css */
@import "tailwindcss";

@source "./node_modules/@xyhp915/vibe-slack-ui/**/*.{js,jsx}";

Customization

All components accept a className prop for custom styling:

<SlackButton className="my-custom-class">
  Custom Styled Button
</SlackButton>

⌨️ Keyboard Shortcuts

Many components support keyboard navigation:

• Dropdown/Select:

  • ↑ / ↓ - Navigate options
  • Enter - Select option
  • → / ← - Open/close submenu
  • Esc - Close menu

• Dialog:

  • Esc - Close dialog
  • Tab - Navigate focusable elements

• Radio/Checkbox:

  • Space - Toggle selection
  • Tab - Navigate between options

📖 Documentation

For detailed documentation and examples, check out the /docs folder:

• Quick Reference
• Button Components
• Dialog Guide
• Input Components
• Dropdown Features
• Notification System
• Component Architecture

🛠️ Development

# Clone the repository
git clone https://github.com/xyhp915/vibe-slack-ui.git

# Install dependencies
npm install

# Run development server
npm run dev

# Build the library
npm run build:libs

# Lint code
npm run lint

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

• Design inspiration from Slack
• Icons by Lucide
• Built with React and Tailwind CSS

💬 Support

If you have any questions or need help, please:

• 📝 Open an issue
• 💡 Check the documentation
• ⭐ Star the repo if you find it useful!

Made with ❤️ by the Vibe team