15+ Product-ready UI Components in Pure JavaScript/CSS – SimpUI

SimpUI is a lightweight JavaScript/CSS UI component library that helps you build minimal, clean, responsive webpages without dependencies or build processes.

It currently provides 15+ ready-to-use UI components like buttons, modals, datepickers, and form elements that you can drop into any web project by including two CSS files and one JavaScript file.

Features:

• Zero dependencies: Pure CSS and vanilla JavaScript with no external requirements.
• Responsive design: Components adapt to different screen sizes automatically.
• Easy customization: Override default styles by adding your own CSS rules after the library.
• Framework agnostic: Works with any JavaScript framework or plain HTML projects.

UI Components Included:

• Badge: Status indicators and labels with multiple size and style variants
• Button: Clickable elements with primary, secondary, and outline styles
• Checkbox: Form selection elements with custom styling
• Dark Mode: Built-in theme switching functionality
• Datepicker: Calendar selection interface for date inputs
• DateTime Picker: Combined date and time selection component
• Hover Card: Content popover that appears on element hover
• Input: Styled text input fields with validation states
• Modal: Dialog boxes for displaying content over the main interface
• Option: Custom styled select option elements
• OTP: One-time password input fields for authentication
• Radio: Single-choice selection elements with custom appearance
• Select: Dropdown selection menus with enhanced styling
• Textarea: Multi-line text input areas
• Toast: Notification messages that appear temporarily

Use Cases

• Rapid Prototyping: When you need to build a functional proof-of-concept quickly, you can’t afford to spend hours configuring a build environment. SimpUI lets you grab components and assemble a UI in minutes.
• Static Websites: For projects built with static site generators like Jekyll or Eleventy, a heavy JavaScript framework is often overkill. This library adds interactivity like modals or toasts without bloating the final output.
• Legacy Project Enhancements: Dropping a full framework into an older codebase can be a nightmare. SimpUI allows you to add a modern component, like a datepicker, to a specific page without conflicting with existing scripts.
• Small Personal Projects: If you’re building a simple landing page or a personal portfolio, you can use these components to add a professional touch without any setup overhead.

How to use it:

1. Download the package and add the following files to your HTML document. The component library requires two stylesheet files and one JavaScript file for the datepicker functionality:

<link rel="stylesheet" href="path/to/simpui.css">
<link rel="stylesheet" href="path/to/simpicker.css">
<script src="path/to/simpicker.js"></script>

2. Once you have included the library files, you can use any of the 15 available components by adding the appropriate CSS classes to your HTML elements. For example, creating badges requires only adding classes to span elements:

<span class="simpui-badge primary">Primary</span>
<span class="simpui-badge success">Success</span>
<span class="simpui-badge danger sm">Small</span>
<span class="simpui-badge outline warning">Outline</span>
<span class="simpui-badge subtle md">Subtle</span>

3. You can override default styles by adding your CSS rules after the SimpUI stylesheet. This allows you to control over colors, spacing, and typography while maintaining the component functionality:

.simpui-badge.custom {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
}

The post 15+ Product-ready UI Components in Pure JavaScript/CSS – SimpUI appeared first on CSS Script.