Skip to content

An easy and ready to use library for creating modular and reusable UI components ๐ŸŽ‰

Notifications You must be signed in to change notification settings

veD-tnayrB/pragmate-ui

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

70 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ† Pragmate UI

Pragmate UI is a library of React components that are designed to help you create beautiful and functional user interfaces with ease. Whether you need a simple button, a complex modal, or anything in between, Pragmate UI has you covered.

Features

  • Easy to use: Pragmate UI components are built with simplicity and usability in mind. You can customize them with props and styles, or use them as they are with sensible defaults.
  • Responsive and accessible: Pragmate UI components are responsive to different screen sizes and devices, and follow the best practices for accessibility and web standards.
  • Creative and impressive: Pragmate UI components are not only functional, but also aesthetically pleasing. They have smooth animations, elegant colors, and modern design elements that will make your UI stand out.

Installation

To install Pragmate UI, run the following command in your terminal:

npm install pragmate-ui

Documentation

For more details on how to use Pragmate UI components, please refer to the documentation website: https://pragmate-ui.com/docs

There you will find the full list of components, their props, examples, and more.

Components

Pragmate UI currently offers the following components:

  • Empty: A component that renders a placeholder message when there is no data or content to display.
  • Button: A component that renders a clickable button with different variants and sizes.
  • Textarea: A component that renders a multi-line text input field with auto-resizing and character limit features.
  • Switch: A component that renders a toggle switch that can be used for boolean values or options.
  • Input: A component that renders a single-line text input field with validation and masking features.
  • Checkbox: A component that renders a checkbox that can be used for multiple selection or boolean values.
  • Radio: A component that renders a radio button that can be used for single selection or options.
  • Toast: A component that renders a notification message that appears on the top right corner of the screen and disappears after a few seconds.
  • ScrollContainer: A component that renders a container that has a custom scrollbar and supports horizontal and vertical scrolling.
  • Modal: A component that renders a modal dialog that appears on the center of the screen and overlays the rest of the content.
  • Alert Modal: A component that renders a modal dialog that displays an alert message with an icon and an optional action button.
  • Confirm Modal: A component that renders a modal dialog that displays a confirmation message with an icon and two action buttons (confirm and cancel).
  • Image: A component that renders an image with lazy loading and fallback features.
  • IconButton: A component that renders a button with an icon and no text.
  • Icon: A component that renders an icon from various icon libraries or custom SVGs.
  • Tabs: A component that renders a tabbed navigation with different styles and orientations.
  • Input Controller: A component that renders a controller for an input field with increment and decrement buttons.
  • Swiper: A component that renders a carousel or slider with swipe gestures and pagination features.
  • Alert: A component that renders an alert message with an icon and an optional close button.
  • Verification Code: A component that renders an input field for entering a verification code with auto-focus and auto-submit features.
  • DragAndDrop: A component that renders a drag and drop area for uploading files or moving items.
  • Dropdown: A component that renders a dropdown menu with different trigger modes and positions.
  • DropdownSidebar: A component that renders a sidebar menu with nested dropdown items.
  • ThemeSwitcher: A component that renders a switcher for changing the theme of the app (light or dark).
  • Code: A component that renders formatted code with syntax highlighting and line numbers.

License

Pragmate UI is licensed under the MIT License. See the LICENSE file for more information.

Languages

  • TypeScript 65.7%
  • SCSS 33.3%
  • MDX 1.0%