Quickly

A modern React component library and utilities package built with TypeScript, SCSS, and Vite.

Features

• 🚀 Modern Stack: Built with React 18+, TypeScript, and Vite
• 🎨 Design System: Comprehensive SCSS variables, mixins, and animations
• 📦 Tree Shakeable: Only import what you need
• 🧪 Tested: Full test coverage with Vitest and React Testing Library
• 📱 Responsive: Mobile-first design with responsive utilities
• ♿ Accessible: Built with accessibility in mind
• 🔧 Customizable: Easy to theme and extend

Installation

npm install @appsbyme/quickly

Peer Dependencies

This package requires React 18+ as a peer dependency:

npm install react react-dom

Quick Start

Using Components

import { Button } from '@appsbyme/quickly';

function App() {
  return (
    <div>
      <Button label="Click me" variant="primary" />
      <Button label="Secondary" variant="secondary" />
      <Button label="Success" variant="success" />
      <Button label="Danger" variant="danger" />
    </div>
  );
}

Using Styles

@use '@appsbyme/quickly/styles/variables' as vars;
@use '@appsbyme/quickly/styles/mixins' as mixins;

.my-component {
  color: vars.$primary-color;
  padding: 1rem;
  font-family: vars.$font-stack;
  
  @include mixins.respond-to(medium) {
    padding: 2rem;
  }
}

Complete Example

// src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import '@appsbyme/quickly/styles'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

// src/App.tsx
import { Button } from '@appsbyme/quickly'

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Button label="Click me" variant="primary" />
      <Button label="Secondary" variant="secondary" />
    </div>
  )
}

export default App

Components

Button

A flexible button component with multiple variants and sizes.

import { Button } from '@appsbyme/quickly';

// Basic usage
<Button label="Click me" />

// With variants
<Button label="Primary" variant="primary" />
<Button label="Secondary" variant="secondary" />
<Button label="Success" variant="success" />
<Button label="Danger" variant="danger" />

// With sizes
<Button label="Small" size="small" />
<Button label="Medium" size="medium" />
<Button label="Large" size="large" />

// With event handlers
<Button 
  label="Click me" 
  onClick={() => console.log('Clicked!')}
  disabled={false}
/>

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | React.ReactNode | - | The content to display inside the button | | variant | 'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'success' \| 'warning' \| 'danger' | 'primary' | Visual style variant | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Size of the button | | shape | 'rounded' \| 'pill' \| 'square' | 'rounded' | Shape of the button | | loading | boolean | false | Whether the button is in a loading state (shows a spinner icon) | | leftIcon | React.ReactNode | - | Icon to display before the content | | rightIcon | React.ReactNode | - | Icon to display after the content | | fullWidth | boolean | false | Whether the button should take full width | | animated | boolean | true | Whether to show hover animations | | disabled | boolean | false | Whether the button is disabled | | type | 'button' \| 'submit' \| 'reset' | 'button' | HTML button type | | className | string | - | Custom CSS class name | | aria-label | string | - | Accessible label for screen readers |

Note: When loading is true, the button displays a spinner using the shared spinner icon from the Icon component. You can customize the spinner by overriding the Icon's props or styles.

Design System

Variables

Access design tokens and variables:

@use '@appsbyme/quickly/styles/variables' as vars;

.my-component {
  color: vars.$primary-color;
  font-family: vars.$font-stack;
  border-radius: vars.$border-radius;
}

Mixins

Use responsive and utility mixins:

@use '@appsbyme/quickly/styles/mixins' as mixins;

.my-component {
  padding: 1rem;
  
  @include mixins.respond-to(medium) {
    padding: 2rem;
  }
  
  @include mixins.flex-center;
}

Animations

Apply consistent animations:

@use '@appsbyme/quickly/styles/animations' as animations;

.my-component {
  @include animations.fade-in;
  transition: animations.$transition-fast;
}

TypeScript Support

This package is built with TypeScript and includes full type definitions. All components and utilities are fully typed for better development experience.

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details